Google Maps, open info window after click on a link - google-maps

Question

i have this code to display a google map:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(40.714364, -74.005972),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("googlemap"), mapOptions);
var locations = [
['New York', 40.714364, -74.005972, 'http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png']
];
var marker, i;
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: locations[i][3]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="googlemap" style="width: 100%; height: 500px;"></div>
Open Info Window
That's not the final code, because i want add more markers.
The problem is, that i need external links to open the info window of a marker.
For Example:
Link 1 opens the info window from marker 1
Link 2 opens the info window from marker 2
etc...
I need a link something like this:
Open Info Window One
Here is my code in jsfiddle:
http://jsfiddle.net/fJ4jG/3/
I found couple of solutions, but i don't know how to use this code together with my code.
It should work like this:
http://www.geocodezip.com/v3_MW_example_map2.html
Thanks for every help!

Answer 1

What that example does is it creates an array where it stores the markers. So when the markers are created, they get pushed to that markers array. When you click on the link you send an index with the function that is a reference to the marker in the array.
So JavaScript looks like this:
var markers = [];
// The array where to store the markers
function initialize() {
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(40.714364, -74.005972),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("googlemap"), mapOptions);
var locations = [
['New York', 40.714364, -74.005972, 'http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png']
];
var marker, i;
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: locations[i][3]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
// Push the marker to the 'markers' array
markers.push(marker);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
// The function to trigger the marker click, 'id' is the reference index to the 'markers' array.
function myClick(id){
google.maps.event.trigger(markers[id], 'click');
}
And in your HTML a tag you add the myClick function like this:
Open Info Window
Example: http://jsfiddle.net/fJ4jG/9/

Answer 2

As in my example.
add a global array to save references to the google.maps.Marker objects:
var gmarkers = [];
push the markers onto that array as you create them
gmarkers.push(marker);
trigger the "click" event on the desired marker:
Open Info Window
jsfiddle

Answer 3

use this code i already tried it
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(locations[i][0]);
infoWindow.open(map, marker);
});