Fiz um site com Google Maps que utilizava cada posição de um array para cada marcador...
var map;
var markers = [];
function initMap() {
var uluru = {lat: -23.9651447, lng: -46.3838347};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: uluru
});
var locations = [
{title:'1', location: {lat: -23.967282, lng:-46.383489}},
{title:'2', location: {lat: -23.965176, lng:-46.383606}},
{title:'3', location: {lat: -23.968734, lng:-46.387660}},
{title:'4', location: {lat: -23.967054, lng:-46.383229}},
{title:'5', location: {lat: -23.967462, lng:-46.377247}},
{title:'6', location: {lat: -23.964940, lng:-46.384603}}
];
var largeInfowindow = new google.maps.InfoWindow();
for (var i = 0; i < locations.length; i++) {
var position = locations[i].location;
var title = locations[i].title;
var marker = new google.maps.Marker({
position: position,
title: title,
animation: google.maps.Animation.DROP,
icon: defaultIcon,
id: i
});
markers.push(marker);
marker.addListener('click', function(){
populateInfoWindow(this, largeInfowindow);
});
}
document.getElementById('show-listings').addEventListener('click', showListings);
document.getElementById('hide-listings').addEventListener('click', hideListings);
}
function populateInfoWindow(marker, infowindow){
if(infowindow.marker != marker){
infowindow.setContent('');
infowindow.marker = marker;
infowindow.addListener('closeclick', function(){
infowindow.marker = null;
});
infowindow.open(map, marker);
}
}
function showListings(){
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
bounds.extend(markers[i].position);
}
map.fitBounds(bounds);
}
function hideListings(){
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
}
Porém, posteriormente tive que conectar com o banco de dados utilizando xml, os marcadores são exibidos normalmente mas as funções de exibir e ocultar não funcionam mais, pois não existe mais um array de marcadores para ser "varrido" e não consegui corrigir o problema, agradeceria muito uma ajuda!
var map;
var markers = [];
function initMap() {
var uluru = {lat: -23.9651447, lng: -46.3838347};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: uluru
});
var largeInfowindow = new google.maps.InfoWindow();
downloadUrl('xml/map_xml.php', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
var title = markerElem.getAttribute('nome');
var position = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
var marker = new google.maps.Marker({
map: map,
position: position,
title: title,
animation: google.maps.Animation.DROP,
icon: defaultIcon
});
marker.addListener('click', function(){
populateInfoWindow(this, largeInfowindow);
});
});
});
}
function hideListings(){
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
function populateInfoWindow(marker, infowindow){
if(infowindow.marker != marker){
infowindow.setContent('');
infowindow.marker = marker;
infowindow.addListener('closeclick', function(){
infowindow.marker = null;
});
infowindow.open(map, marker);
}
}
function showListings(){
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
bounds.extend(markers[i].position);
}
map.fitBounds(bounds);
}