Google maps JS API V3,add multiple markers to map with infowindows from remote json source

Question

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,

{0 : {lat:"", lng:"", description:"", .....}, 1 : {lat: "", .....}}

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:

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 < count(data); i++) {
            pins = data[i];
            html = '<h4>'+pins['title']+'</h4>'+'<p>'+pins['description']+'</p>'+'<p><a href="'+pins['url']+'">Read More</a>'
            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));
        }
    });
};

Don't pay attention to the navigator.geolocation part, but look at the other things. Now what this script does is, it only marks the last marker in the json 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. EDIT2 : Its working now. Followed the steps given here http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/

Answer 1

Have you checked that jQuery is getting the JSON data in the correct format? jQuery can be very stringent with its JS checking, and in this case I'd recommend the format:

[{object},{object},{object}]

rather than:

{0:{object},1:{object},2:{object}}

which might also need you to quote the identifiers:

{"0":{object},"1":{object},"2":{object}}

So, before the first line of your marker function add:

console.log(data);

and see what it comes out with. Once you've confirmed the data is correct I'd also recommend looping through with jQuery's $.each operator:

$.each(data,function(key,val){
 //stuff
});