Customizing google map with multiple markers and info window

Question

*Hi there, i am new to the whole Google map api environment so please do guide me along.

What i am trying to achieve below is to extract data from either a XML file or a JSON file and plot the locations onto Google map. I am also trying to add a info window whereby it will show different information for each location. I understand that to have a info window, i would have to create a over lay. But the question is how do i actually tag multiple info-window to their markers ?

All markers are displayed well on the map, but the problem is when I click to see info window - info window is always displayed on the same marker. What's the problem?

This is what i have came up with so far and i would greatly appreciate if anyone is able to spot the issue.

<!DOCTYPE html>
<html>
  <head>
    <style>
      html, body, #map_canvas { margin: 0; padding: 0; height: 100%; }
    </style>
    <script
      src="https://maps.googleapis.com/maps/api/js sensor=false&libraries=visualization">
    </script>

    <script>
    var map;
    function initialize() {
    var mapOptions = {
    zoom: 5,
    center: new google.maps.LatLng(-27.48939, 153.012772),
    mapTypeId: google.maps.MapTypeId.ROADMAP 
  };

    map = new google.maps.Map(document.getElementById('map_canvas'),
    mapOptions);


    var script = document.createElement('script');
    script.src = 'http://earthquake.usgs.gov/earthquakes/feed/geojsonp/2.5/week';
    document.getElementsByTagName('head')[0].appendChild(script);
}

    window.eqfeed_callback = function(results) {
    for (var i = 0; i < results.features.length; i++) {


    var earthquake = results.features[i]; 
    var coords = earthquake.geometry.coordinates; 

    var latLng = new google.maps.LatLng(coords[1],coords[0]); 

    var marker = new google.maps.Marker({
      position: latLng,
      map: map,

    });

    var infowindow = new google.maps.InfoWindow({
    content: "<div>Hello! World</div>",
    maxWidth:100
    });

    google.maps.event.addListener(marker, "mouseover", function() {
    infowindow.open(map, marker);
});

  }
}

  </script>
  </head> 
  <body onload="initialize()">
    <div id="map_canvas"></div>
  </body>

  </html>

Is there a question? When not, http://codereview.stackexchange.com would be a better place to post this. — Dr.Molle, Aug 17 '13 at 08:50
possible duplicate of [Google Maps JS API v3 - Simple Multiple Marker Example](http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example) — geocodezip, Aug 17 '13 at 21:13

Lukas Greblikas · Accepted Answer · 2013-08-17T14:00:55.170

1

Use this instead of marker, when opening infowindow.

google.maps.event.addListener(marker, "mouseover", function() {
        infowindow.open(map, this);
    });

edited Aug 17 '13 at 14:00

answered Aug 17 '13 at 11:34

Lukas Greblikas

649
6
14

Hey Lukas thanks for the advice. Just to check with you, where will my content be pulling from now ? What should i do if i would like to pull the content from an external source like XML or JSON ? – user2691544 Aug 17 '13 at 12:23
Everything stays as it was. You can do it the same way you did it before. – Lukas Greblikas Aug 17 '13 at 12:38
hmm. in that case it doesnt seems to be working. The info window function is gone. – user2691544 Aug 17 '13 at 13:03
I am very very sorry! I made very silly mistake previously. Fixed it! Try the current answer's version. You can check my mistake in answer's editing history. Check [working version](http://greblys.net/infowindow.php) – Lukas Greblikas Aug 17 '13 at 14:02
Thanks dude. It is functional now. Cheers – user2691544 Aug 17 '13 at 14:35

Customizing google map with multiple markers and info window

1 Answers1