I need to place circles around multiple markers in Maps API v3
This is what I've done so far:
function initialize(){
var locations = [
['Band Stand', 19.04519, 72.819091],
['Gateway Of India Mumbai', 18.921984, 72.834654],
['Haji Ali', 18.9778192, 72.8104819],
['Kings Circle', 19.032261, 72.857225],
];
var map = new google.maps.Map(document.getElementById('map-sec'), {
zoom: 12,
center: new google.maps.LatLng(19.0822507,72.8811862),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var circle = new google.maps.Circle({
map: map,
radius: 1000,
fillColor: '#AA0000'
});
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
circle.bindTo('center', marker, 'position');
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
However, this is giving me a circle around only one of the locations. What should I do to get multiple circles?
Try moving this:
var circle = new google.maps.Circle({
map: map,
radius: 1000,
fillColor: '#AA0000'
});
..inside the for loop:
for (i = 0; i < locations.length; i++) {
var circle = new google.maps.Circle({
map: map,
radius: 1000,
fillColor: '#AA0000'
});
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
circle.bindTo('center', marker, 'position');
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.