WordPressで複数のマップポインタを表示

カスタム投稿タイプからのマップに複数のマップポインタを表示したい。私は単一のマップポインタを取得することができます。マップ上で複数のマップポインタを取得するにはどうすればよいですか？ここに私のコードです。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>

おかげで、:)なぜあなたはマップに複数のマーカーを追加する問題を抱えているが、この例から何をすべきかを考え出すことができるかもしれません

出典

2016-07-23 Dreamerz

わかりません。

<!doctype html> 
<html> 
    <head> 
     <title>Google maps - multiple markers example</title> 

     <script type='text/javascript'> 
      /* data, derived from a db call and written as a json object */ 
      var json={ 
       "results":{ 
        "0":{"name":"Kinnettles","lat":"56.61543329027024","lng":"-2.9266123065796137"}, 
        "1":{"name":"Nathro","lat":"56.793249595719956","lng":"-2.8623101711273193"}, 
        "2":{"name":"Ark Hill","lat":"56.57065514278748","lng":"-3.0511732892761074"}, 
        "3":{"name":"Dodd Hill","lat":"56.54251020079966","lng":"-2.9051538305053555"}, 
        "4":{"name":"Govals","lat":"56.582320876071854","lng":"-2.9509015874633633"}, 
        "5":{"name":"Carsegownie","lat":"56.67951330362271","lng":"-2.8062983350524746"}, 
        "6":{"name":"Frawney","lat":"56.56806620951482","lng":"-2.9501720266113125"}, 
        "7":{"name":"North Tarbrax","lat":"56.57144715546598","lng":"-2.92476614282225"}, 
        "8":{"name":"The Carrach","lat":"56.6938437674986","lng":"-3.131382067657455"}, 
        "9":{"name":"Glaxo","lat":"56.70431711148748","lng":"-2.4660869436035"} 
       } 
      }; 

      /* callback function */ 
      function initialise(){ 

       var bounds = new google.maps.LatLngBounds(); 
       var infoWindow = new google.maps.InfoWindow(); 

       var map = new google.maps.Map(document.getElementById('map'), { 
        zoom:10, 
        center: { lat: 56.6154, lng: -2.9266 } 
       }); 

       /* process json data and add a marker for each location */ 
       var data=json.results; 
       for(var o in data){ 

        var latlng=new google.maps.LatLng(data[o].lat, data[o].lng); 
        var title=data[o].name; 

        var marker = new google.maps.Marker({ 
         position: latlng, 
         map: map, 
         title: title, 
         content:title 
        }); 

        google.maps.event.addListener(marker, 'click', function(event){ 
         infoWindow.setContent(this.content); 
         infoWindow.open(map, this); 
        }.bind(marker)); 

        bounds.extend(latlng); 
       } 
       map.fitBounds(bounds); 
      } 
     </script> 
     <script async defer src='//maps.googleapis.com/maps/api/js?key=AIzaSyA157quXbUlHHgm4wJJxzD49MivKgPSil8&callback=initialise' type='text/javascript'></script> 
     <style type='text/css'> 
      html, body { 
       height: 100%; 
       margin: 0; 
       padding: 0; 
      } 
      #map{ 
       display:block; 
       box-sizing:border-box; 
       width:800px; 
       height:600px; 
       margin:1rem auto; 
       float:none; 
       border:3px solid black; 
      } 
     </style> 
    </head> 
    <body> 
     <div id='map'></div> 
    </body> 
</html>

出典

2016-07-23 08:41:44 RamRaider

私はnewbeeです、私は考えています。私はそのスクリプトから1マップポインタを得ることができます、私も複数のポインタを得ることができます。 – Dreamerz

マーカの実際のデータを見ることなく、正確ではありませんが、1つのアイテムだけの配列を持っているように見えます。あなたがそれをやるべきか、あなたの悲しみに対する答えとしてではなく、指導をしてください。 – RamRaider

ありがとうございました。 – Dreamerz

WordPressで複数のマップポインタを表示

答えて

関連する問題