Struggling with array of markers for Google Maps API
I started to list my markers individually for my Google Map, but quickly realised this was inefficient. I have tried to create an array to put the markers onto my map, but it is not showing anything, can you see where I have gone wrong?
function initialize() {
var latlng = new google.maps.LatLng(52.474, -1.868);
var myOptions = {
开发者_运维知识库 zoom: 11,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var image = 'i/hotel-map-pin.png';
var hotels = [
['ibis Birmingham Airport', 52.452656, -1.730548, 4],
['ETAP Birmingham Airport', 52.452527, -1.731644, 3],
['ibis Birmingham City Centre', 52.475162, -1.897208, 2]
];
for (var i = 0; i < hotels.length; i++) {
var marker = new google.maps.Marker({
position: hotels[1],
map: map,
icon: image,
title: hotels[0],
zIndex: hotels[2]
});
}
}
Thanks.
In your loop you are accessing the hotels array at fixed indexes (1, 0 & 2) rather than the array elements at index i:
for (var i = 0; i < hotels.length; i++) {
var hotel = hotels [i]
var marker = new google.maps.Marker({
position: new google.maps.LatLng (hotel[1], hotel[2]),
map: map,
icon: image,
title: hotel[0],
zIndex: hotel[3]
});
}
Here is a working example with the fix.
Here's the JSFiddle Demo:
First of all you are not accessing your hotels array correctly. It should be hotels[i][0]
for title hotels[i][1]
and hotels[i][2]
for lat and lng and hotels[i][3]
for z-index. Secondly, position takes the google.maps.LatLng
object with lat and lng as the param.
function initialize() {
var latlng = new google.maps.LatLng(52.474, -1.868);
var myOptions = {
zoom: 11,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var image = 'i/hotel-map-pin.png';
var hotels = [
['ibis Birmingham Airport', 52.452656, -1.730548, 4],
['ETAP Birmingham Airport', 52.452527, -1.731644, 3],
['ibis Birmingham City Centre', 52.475162, -1.897208, 2]
];
for (var i = 0; i < hotels.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(hotels[i][1], hotels[i][2]),
map: map,
// icon: image,
title: hotels[i][0],
zIndex: hotels[i][3]
});
}
}
window.onload = initialize;
精彩评论