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