CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Haroldo
Haroldo

Reputation: 37377

Google Maps API V3 - need help with multiple markers

I'm pretty new to google maps so please be patient!

My code was working fine untill i tried to add multiple markers, would really appreciate it if anyone could glance at it and see if i'm missing something...

$(function() {

    var map_markers = [ [ [52.951946], [1.018124] ], [ [52.955311], [0.987997] ] ]; 

    var options = {
        zoom: 13,
        center: latlng,
        mapTypeControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };          
    var map = new google.maps.Map(document.getElementById('map_canvas'), options);


    //markers               
    for (var i = 0; i < map_markers.length; i++) {
        var m =         map_markers[i];
        var myLatLng =  new google.maps.LatLng(m[0], m[1]);
        var marker =    new google.maps.Marker({
            position: myLatLng,
            map: map

        });
    }
})

Upvotes: 2

Views: 896

Answers (1)

Daniel Vassallo
Daniel Vassallo

Reputation: 344251

Your problem is how you initialized your map_markers array. You probably should be doing the following:

var map_markers = [[52.951946, 1.018124], [52.955311, 0.987997]];

Otherwise, with your map_markers you would have had to reference it as follows:

var m =         map_markers[i];
var myLatLng =  new google.maps.LatLng(m[0][0], m[0][1]);

Let's break down your map_markers array to help you understand the problem:

var map_markers = [ [ [52.951946], [1.018124] ], [ [52.955311], [0.987997] ] ];

console.log(map_markers[0]);
//  [[52.951946], [1.018124]]   

Object.prototype.toString.call(map_markers[0]);
// "[object Array]"

console.log(map_markers[0][0]);
//  [52.951946]                  

Object.prototype.toString.call(map_markers[0][0]);
// "[object Array]"

console.log(map_markers[0][0][0]);
//  52.951946                    

Object.prototype.toString.call(map_markers[0][0][0]);
// "[object Number]"

Therefore the problem you were having boils down to the fact that the parameters you were passing to the google.maps.LatLng() constructor were an Array instead of a Number.

Upvotes: 2

Related Questions