title: Google maps JS API V3,add multiple markers to map with infowindows from remote json source
body: <p>I want to place multiple markers on a google map, each with its own infowindow. The data that i need to place these markers is dynamic and is obtained from a remote api that provides a json output. The json is of the format,</p>
  
  <pre><code>{0 : {lat:"", lng:"", description:"", .....}, 1 : {lat: "", .....}}
  </code></pre>
  
  <p>and so on. It can contain any number of value sets. The format of each set however is defined. Also, the keys are such, that they can be iterated over easily. The code i have written is as follows:</p>
  
  <pre><code>var map;
  var initPos;
  var marker;
  var pins;
  var infowindow = null;
  
  function count(obj) {
    var i = 0;
    for (var x in obj)
      if (obj.hasOwnProperty(x))
        i++;
    return i;
  };
  
  function initialize() {
      var myOptions = {
      zoom: 4,
      mapTypeId: google.maps.MapTypeId.ROADMAP
      };
  
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
      infowindow = new google.maps.InfoWindow();
  
      if(navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
          initPos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
          map.setCenter(initPos);
          }, function() {
              initPos = new google.maps.LatLng(19.074448,72.872314);
              map.setCenter(initPos);
          });
      }
      else {
          initPos = new google.maps.LatLng(19.074448,72.872314);
          map.setCenter(initPos);
      }
      var i, pins, html, pinLatLng, pinMarkers, contentString;
      $.getJSON('/user/map/', function (data) {
          for (i = 0; i &lt; count(data); i++) {
              pins = data[i];
              html = '&lt;h4&gt;'+pins['title']+'&lt;/h4&gt;'+'&lt;p&gt;'+pins['description']+'&lt;/p&gt;'+'&lt;p&gt;&lt;a href="'+pins['url']+'"&gt;Read More&lt;/a&gt;'
              pinLatLng = new google.maps.LatLng(parseFloat(pins['lat']), parseFloat(pins['lng']));
              pinMarkers = new google.maps.Marker({position: pinLatLng, map: map, animation: google.maps.Animation.Drop});
              contentString = "Some content";
              google.maps.event.addListener(pinMarkers, "click", (function(pinMarkers, i) {
                  return function() {
                      infowindow.setContent(html);
                      infowindow.open(map, pinMarkers);
                  }
              })(pinMarkers, i));
          }
      });
  };
  </code></pre>
  
  <p>Don't pay attention to the navigator.geolocation part, but look at the other things. Now what this script does is, <strong>it only marks the last marker in the json</strong> on the map and the rest are not shown. What am i doing wrong? 
  EDIT : So i was making a mistake in the json format, which i've fixed now. Now the problem is that all the infowindows display the same data rather than different ones for each. It does show different markers now though.
  <strong>EDIT2</strong>: Its working now. Followed the steps given here <a href="http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/" rel="nofollow">http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/</a></p>