javascript — реализовать несколько маркеров с помощью Google Maps Api
Создание сайта с использованием WordPress, сайт был запрограммирован, чтобы перечислить один маркер на карте и иметь список других мест под ним. В конечном итоге я хочу удалить описание под картой, и просто перечислить местоположения вместе с картой и отмеченными на ней маркерами.
<body>
<div class="corporateMap"></div>
</body>
<script src='https://maps.googleapis.com/maps/api/js?key=&sensor=false&extension=.js'></script>
<script>
google.maps.event.addDomListener(window, 'load', init);
var map;
var locationPhone= '<?php echo $locationPhone; ?>';
var locationTitle = '<?php echo $locationTitle; ?>';
var locationLat = '<?php echo $locationLat; ?>';
var locationLong = '<?php echo $locationLong; ?>';
function init() {
var mapOptions = {
center: new google.maps.LatLng(locationLat,locationLong),
zoom: 15,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT,
},
disableDoubleClickZoom: true,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
},
scaleControl: true,
scrollwheel: false,
panControl: false,
streetViewControl: false,
draggable : true,
overviewMapControl: false,
overviewMapControlOptions: {
opened: false,
},
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [
{ stylers: [{ saturation: -100 }, { gamma: 1 }] },
{ elementType: "labels.text.stroke", stylers: [{ visibility: "off" }] },
{ featureType: "poi.business", elementType: "labels.text", stylers: [{ visibility: "off" }] },
{ featureType: "poi.business", elementType: "labels.icon", stylers: [{ visibility: "off" }] },
{ featureType: "poi.place_of_worship", elementType: "labels.text", stylers: [{ visibility: "off" }] },
{ featureType: "poi.place_of_worship", elementType: "labels.icon", stylers: [{ visibility: "off" }] },
{ featureType: "road", elementType: "geometry", stylers: [{ visibility: "simplified" }] },
{ featureType: "water", stylers: [{ visibility: "on" }, { saturation: 50 }, { gamma: 0 }, { hue: "#50a5d1" }] },
{ featureType: "administrative.neighborhood", elementType: "labels.text.fill", stylers: [{ color: "#333333" }] },
{ featureType: "road.local", elementType: "labels.text", stylers: [{ weight: 0.5 }, { color: "#333333" }] },
{ featureType: "transit.station", elementType: "labels.icon", stylers: [{ gamma: 1 }, { saturation: 50 }] }
],
}
var mapElement = document.getElementById('corporateMap');
var map = new google.maps.Map(mapElement, mapOptions);
var locations = [
[locationTitle, 'undefined', locationPhone, 'undefined', 'http://www.fptscrap.com/', locationLat, locationLong]
];
for (i = 0; i < locations.length; i++) {
if (locations[i][1] =='undefined'){ description ='';} else { description = locations[i][1];}
if (locations[i][2] =='undefined'){ telephone ='';} else { telephone = locations[i][2];}
if (locations[i][3] =='undefined'){ email ='';} else { email = locations[i][3];}
if (locations[i][4] =='undefined'){ web ='';} else { web = locations[i][4];}
marker = new google.maps.Marker({
icon: '',
position: new google.maps.LatLng(locations[i][5], locations[i][6]),
map: map,
title: locations[i][0],
desc: description,
tel: telephone,
email: email,
web: web
});
bindInfoWindow(marker, map, locations[i][0], description, telephone, email, web);
}
function bindInfoWindow(marker, map, title, desc, telephone, email, web) {
if (web.substring(0, 7) != "http://") {
link = "http://" + web;
} else {
link = web;
}
google.maps.event.addListener(marker, 'click', function() {
var html= "<div style='color:#000;background-color:#fff;padding:5px;width:210px;'><h4>"+title+"</h4><p>"+telephone+"<p><a href='"+link+"'' >"+web+"<a></div>";
iw = new google.maps.InfoWindow({content:html});
iw.open(map,marker);
});
}
}
</script>
<?php } else {
} ?>
Решение
Код уже размещает все маркеры на карте, если они есть, проблема заключается в следующих строках:
var locationPhone= '<?php echo $locationPhone; ?>';
var locationTitle = '<?php echo $locationTitle; ?>';
var locationLat = '<?php echo $locationLat; ?>';
var locationLong = '<?php echo $locationLong; ?>';
Здесь вам нужно изменить часть php для отображения массива местоположений (или, если вы не хотите / не можете получить доступ к php, просто жестко закодировать его), а затем назначить новый массив здесь:
var locations = [
[locationTitle, 'undefined', locationPhone, 'undefined', 'http://www.fptscrap.com/', locationLat, locationLong]
];
Другие решения
Других решений пока нет …