Adding multiple markers in Google Maps V3 using Json - google-maps

Question

I'm trying to adapt my code with json in google maps. I tried looking at other threads of stackoverflow but did not help me.
How do I show multiple points on the map with the coordinates that are received by json?
This code in firebug shows no errors and the map appears all blue.
var geocoder;
var map;
function initialize() {
var url = '/project/display/get_coordinates/';
$.getJSON(url, function(data) {
$.each(data, function(index, c) {
//alert(c.fields['lat']+','+c.fields['lng']); result: -23.0522826,-43.32745712
//Map
latlng = new google.maps.LatLng(c.fields['lat']+','+c.fields['lng']);
//options
var myOptions = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: true
};
//get the map
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//marker
var marker = new google.maps.Marker({
map: map,
position: latlng,
//title: {{i.display.codigo}}
});
//infowindow
var infowindow = new google.maps.InfoWindow({
content: 'oi'
});
//click infowindow
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
});//close each
});//close getjson
}//close initialize
My response in Json:
[{"pk": 1, "model": "address.coordinates", "fields": {"lat": "-23.0522826", "lng": "-43.32745712"}}, {"pk": 2, "model": "address.coordinates", "fields": {"lat": "-22.24569326", "lng": "-43.7028948"}}]
Thanks!

Answer 1

You have 1 real error here:
latlng = new google.maps.LatLng(c.fields['lat']+','+c.fields['lng']);
google.maps.LatLng expects 2 parameters(lat &lng) , but you provide 1(a string containing lat and lng, joined by a comma) . It has to be
latlng = new google.maps.LatLng(c.fields['lat'],c.fields['lng']);
But you also have a logical error:
You overwrite the last map created on every each-loop
Create the map and the infoWindow outside of the $.each()
function initialize()
{
var myOptions =
{
zoom: 5,
center: new google.maps.LatLng(1,1) ,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: true
};
var url = '/project/display/get_coordinates/';
$.getJSON(url, function(data) {
map= new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var bounds=new google.maps.LatLngBounds();
infowindow = new google.maps.InfoWindow({
content: 'oi'
});
$.each(data, function(index, c) {
var latlng = new google.maps.LatLng(c.fields['lat'],c.fields['lng']);
var marker = new google.maps.Marker({
map: map,
position: latlng,
title:'pk:'+c.pk
});
bounds.extend(latlng);
google.maps.event.addListener(marker, 'click', function() {
infowindow.close();
infowindow.setContent('pk:'+c.pk);
infowindow.open(map, marker);
});
});//close each
map.fitBounds(bounds);
});//close getjson
}//close initialize