Google Maps API v3 Adds Multiple Tokens w / info windows w / custom text

Question

I make a site on cyclists killed in Norway. For my project, I use google maps api v3, but I have a vague familiarity with javascript. You can see my result so far: http://salamatstudios.com/googlemapstest/

Basically I want to have several markers with info windows on each of them. Each of the info windows will contain: What is the age), Location, Date of death, Details (which will be associated with the page of the site itself).

Like this example here: http://salamatstudios.com/bicycles/

I tried working with only one marker and infoindust, and it worked just fine. When I want to add new markers with custom info windows on each, I'm stuck. At the moment, I have 3 markers in different places, as shown in the first link, but not one of the info windows appears when I click the marker.

How do I get around it to encode it so that infowindows are displayed? And how can I have my own text in each infowindow? When this is done, I will have about 30-40 markers. All information windows will have different types of information.

function initialize() { var mapOptions = { center: new google.maps.LatLng(65.18303, 20.47852), zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP, // MAP CONTROLS (START) mapTypeControl: true, panControl: true, panControlOptions: { position: google.maps.ControlPosition.TOP_RIGHT }, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.LARGE, position: google.maps.ControlPosition.LEFT_TOP }, streetViewControl: true, streetViewControlOptions: { position: google.maps.ControlPosition.LEFT_TOP }, // MAP CONTROLS (END) }; var map = new google.maps.Map(document.getElementById("map"), mapOptions); // -------------- MARKER 1 var marker1 = new google.maps.Marker({ position: new google.maps.LatLng(59.96384, 11.04120), map: map, icon: 'img/bike5.png' }); // MARKER 1 INFO WINDOW var infowindow1 = new google.maps.InfoWindow({ content: 'Name<br />Location<br />Date<br /><br /><a href="http://www.db.no" target="_blank">Read more(test link)</a>' }); // End of infowindow code // Adding a click event to the marker google.maps.event.addListener(marker1, 'click', function() { // Calling the open method of the infoWindow infowindow1.open(map, marker); }); // -------- END OF 1st MARKER // -------------- MARKER 2 var marker2 = new google.maps.Marker({ position: new google.maps.LatLng(60.63040, 8.56102), map: map, icon: 'img/bike5.png' }); // MARKER 2 INFO WINDOW var infowindow2 = new google.maps.InfoWindow({ content: 'Name<br />Location<br />Date<br /><br /><a href="http://www.db.no" target="_blank">Read more(test link)</a>' }); // End of infowindow code // Adding a click event to the marker google.maps.event.addListener(marker2, 'click', function() { // Calling the open method of the infoWindow infowindow2.open(map, marker); }); // -------- END OF 2nd MARKER // -------------- MARKER 3 var marker3 = new google.maps.Marker({ position: new google.maps.LatLng(60.39126, 5.32205), map: map, icon: 'img/bike5.png' }); // MARKER 3 INFO WINDOW var infowindow3 = new google.maps.InfoWindow({ content: 'Name<br />Location<br />Date<br /><br /><a href="http://www.db.no" target="_blank">Read more(test link)</a>' }); // End of infowindow code // Adding a click event to the marker google.maps.event.addListener(marker3, 'click', function() { // Calling the open method of the infoWindow infowindow3.open(map, marker); }); // -------- END OF 3rd MARKER } google.maps.event.addDomListener(window, 'load', initialize); 

It would be great if someone could give me the key. I tried to search a little, but I can not find the answer. Thank you in advance!: -)

Answer 1

You need to attach the infowindow value to the correct markers. Currently, they are all associated with a "marker" that does not exist (and should cause an error message in the javascript console when clicking tokens).

Inside click listener changes:

 infowindow1.open(map, marker); infowindow2.open(map, marker); infowindow3.open(map, marker); 

To:

 infowindow1.open(map, marker1); infowindow2.open(map, marker2); infowindow3.open(map, marker3); 

working example

Answer 2

  google.maps.event.addListener(marker1, 'click', function() { // Calling the open method of the infoWindow infowindow1.open(map, marker); }); 

change to

  google.maps.event.addListener(marker1, 'click', function() { // Calling the open method of the infoWindow infowindow1.open(map, this); }); 

Answer 3

In addition to HoangHieu's Answer, when you use for a loop, it is best to use it as follows:

 marker.info = new google.maps.InfoWindow({ content: 'some text' }); google.maps.event.addListener(marker, 'click', function() { this.info.open(map, this); });