-1
Google Maps APIを使用して、1つのページに2つのGoogleマップを表示しようとしています。どちらも個々のマーカーが割り当てられています。マーカーは、頭の中の異なるカスタムポストタイプからWordpressを通じて動的に生成されます。複数のGoogleマップを1組のマーカーで表示する
マーカーが表示された状態で1つのマップを表示することはできましたが、他のマップが機能しているようです。私は以下のような異なるマップのために別々の変数を追加しようとしましたが、まだ何もありません。
誰でも手助けできますか？
<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