-1
我正在使用Google Maps API尝试在单个页面上显示两个Google地图 - 两个地图都分配有单独的标记。标记是通过Wordpress从头部的不同自定义帖子类型动态生成的。在一个页面上显示多个具有不同标记集的Google地图
我已经设法得到一个地图显示好的标记显示，但我似乎无法得到其他地图工作。我试过为下面的不同地图添加单独的变量，但仍然没有。
任何人都可以帮忙吗？
<script type="text/javascript">
var locations = [
<?php $i = 1; while (have_posts()) : the_post(); ?>
<?php $location = get_post_meta(get_the_ID(), 'rsl_latitude', true); if($location) { ?>
{
latlng : new google.maps.LatLng(<?php echo get_post_meta(get_the_ID(), 'rsl_latitude', true); ?>, <?php echo get_post_meta(get_the_ID(), 'rsl_longitude', true); ?>),
info : document.getElementById('item<?php echo $i; ?>')
},
<?php } else {} $i++; endwhile; ?>
];
</script>
<?php else : ?>
<!-- No matching posts, show an error -->
<h1>Error 404 — Page not found.</h1>
<?php endif; ?>
<script type="text/javascript">
var inthearea = [
<?php $inthearea = types_child_posts("in-the-area");
foreach ($inthearea as $area) { ?>
<?php
$location = get_field('location', $area->ID);
$areacat = get_field('area_category', $area->ID);
?>
<?php $i = 1 ?>
{
latlng : new google.maps.LatLng(<?php echo $location['lat'];?>, <?php echo $location['lng'];?>),
info : document.getElementById('item<?php echo $i; ?>')
},
<?php $i++; } ?>
{
latlng : new google.maps.LatLng(<?php echo get_post_meta(get_the_ID(), 'rsl_latitude', true); ?>, <?php echo get_post_meta(get_the_ID(), 'rsl_longitude', true); ?>),
info : document.getElementById('item<?php echo $i; ?>')
},
];
</script>
var infowindow = new google.maps.InfoWindow();
function initialize() {
map = new google.maps.Map(document.getElementById('map1'), {
zoom: 12,
center: new google.maps.LatLng(38.898748, -77.037684),
scrollwheel: false ,
styles: [
{
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#245e7c"
}
]
},
{
"featureType": "landscape",
"elementType": "all",
"stylers": [
{
"color": "#f2f2f2"
}
]
},
{
"featureType": "poi",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road",
"elementType": "all",
"stylers": [
{
"saturation": -100
},
{
"lightness": 45
}
]
},
{
"featureType": "road.highway",
"elementType": "all",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "water",
"elementType": "all",
"stylers": [
{
"color": "#d8dbdc"
},
{
"visibility": "on"
}
]
}
]
});
var latlngbounds = new google.maps.LatLngBounds();
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: locations[i].latlng,
map: map,
icon: 'https://rslcloud.co.uk/wp-content/themes/rsl-theme/img/map-markerv2.png'
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i].info);
infowindow.open(map, marker);
}
})(marker, i));
latlngbounds.extend(marker.position);
//Center map and adjust Zoom based on the position of all markers.
if (latlngbounds.getNorthEast().equals(latlngbounds.getSouthWest())) {
var extendPoint = new google.maps.LatLng(latlngbounds.getNorthEast().lat() + 0.01, latlngbounds.getNorthEast().lng() + 0.01);
latlngbounds.extend(extendPoint);
}
map.fitBounds(latlngbounds);
map.setCenter(latlngbounds.getCenter());
}
}
map2 = new google.maps.Map(document.getElementById('map2'), {
zoom: 12,
center: new google.maps.LatLng(38.898748, -77.037684),
scrollwheel: false ,
styles: [
{
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#245e7c"
}
]
},
{
"featureType": "landscape",
"elementType": "all",
"stylers": [
{
"color": "#f2f2f2"
}
]
},
{
"featureType": "poi",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road",
"elementType": "all",
"stylers": [
{
"saturation": -100
},
{
"lightness": 45
}
]
},
{
"featureType": "road.highway",
"elementType": "all",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "water",
"elementType": "all",
"stylers": [
{
"color": "#d8dbdc"
},
{
"visibility": "on"
}
]
}
]
});
var latlngbounds = new google.maps.LatLngBounds();
for (var i = 0; i < inthearea.length; i++) {
var marker = new google.maps.Marker({
position: inthearea[i].latlng,
map: map2,
icon: 'https://rslcloud.co.uk/wp-content/themes/rsl-theme/img/map-markerv2.png'
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(inthearea[i].info);
infowindow.open(map2, marker);
}
})(marker, i));
latlngbounds.extend(marker.position);
//Center map and adjust Zoom based on the position of all markers.
if (latlngbounds.getNorthEast().equals(latlngbounds.getSouthWest())) {
var extendPoint = new google.maps.LatLng(latlngbounds.getNorthEast().lat() + 0.01, latlngbounds.getNorthEast().lng() + 0.01);
latlngbounds.extend(extendPoint);
}
map.fitBounds(latlngbounds);
map.setCenter(latlngbounds.getCenter());
}
initialize();
您的浏览器控制台中有错误..？ – scaisEdge