0
カスタム投稿タイプからのマップに複数のマップポインタを表示したい。私は単一のマップポインタを取得することができます。マップ上で複数のマップポインタを取得するにはどうすればよいですか?ここに私のコードです。WordPressで複数のマップポインタを表示
<style>
#map_wrapper {
height: 400px;
}
#map_canvas {
width: 100%;
height: 100%;
}
</style>
<?php
$location = get_field('google_map_lat_long');
if (!empty($location)):
?>
<?php /* ?>
<div class="acf-map">
<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>
</div>
<?php */ ?>
<!-- End Content -->
<script>
jQuery(function ($) {
// Asynchronously Load the map API
var script = document.createElement('script');
script.src = "//maps.googleapis.com/maps/api/js?key=AIzaSyA157quXbUlHHgm4wJJxzD49MivKgPSil8&sensor=false&callback=initialize";
document.body.appendChild(script);
});
function initialize() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
// Display a map on the page
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setTilt(45);
// Multiple Markers''
// $info='';
var markers = [
<?php
echo '["' . $location['address'] . '",' . $location['lat'] . ',' . $location['lng'] . '],';
?>
];
// Info Window Content
var infoWindowContent = [['<div class="info_content"><h3><?php echo $location['address']; ?></h3><p><?php echo $location['address']; ?></p></div>']];
// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow(), marker, i;
// Loop through our array of markers & place each one on the map
for (i = 0; i < markers.length; i++) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
}
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function (event) {
this.setZoom(14);
google.maps.event.removeListener(boundsListener);
});
}
</script>
<?php
endif;
?>
<?php endwhile; ?>
<div id="map_wrapper">
<div id="map_canvas" class="mapping"></div>
</div>
おかげで、:)なぜあなたはマップに複数のマーカーを追加する問題を抱えているが、この例から何をすべきかを考え出すことができるかもしれません
私はnewbeeです、私は考えています。私はそのスクリプトから1マップポインタを得ることができます、私も複数のポインタを得ることができます。 – Dreamerz
マーカの実際のデータを見ることなく、正確ではありませんが、1つのアイテムだけの配列を持っているように見えます。あなたがそれをやるべきか、あなたの悲しみに対する答えとしてではなく、指導をしてください。 – RamRaider
ありがとうございました。 – Dreamerz