title: Customizing google map with multiple markers and info window
body: <p>*Hi there, i am new to the whole Google map api environment so please do guide me along.</p>
  
  <p>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 ?</p>
  
  <p>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?</p>
  
  <p>This is what i have came up with so far and i would greatly appreciate if anyone is able to spot the issue.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;style&gt;
        html, body, #map_canvas { margin: 0; padding: 0; height: 100%; }
      &lt;/style&gt;
      &lt;script
        src="https://maps.googleapis.com/maps/api/js sensor=false&amp;libraries=visualization"&gt;
      &lt;/script&gt;
  
      &lt;script&gt;
      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 &lt; 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: "&lt;div&gt;Hello! World&lt;/div&gt;",
      maxWidth:100
      });
  
      google.maps.event.addListener(marker, "mouseover", function() {
      infowindow.open(map, marker);
  });
  
    }
  }
  
    &lt;/script&gt;
    &lt;/head&gt; 
    &lt;body onload="initialize()"&gt;
      &lt;div id="map_canvas"&gt;&lt;/div&gt;
    &lt;/body&gt;
  
    &lt;/html&gt;
  </code></pre>