在js中爲Google地圖使用高級自定義字段值標記

Question

我想使用高級自定義字段放置Google地圖圖標。我更喜歡使用中繼器字段，但首先我試圖完成一個常規字段。圖像字段輸出是url。我不明白我做錯了什麼？

這裏是我的代碼片段：

<script> 
<?php $image = get_field('marker'); ?> 

function initialize() { 

     //add map, the type of map 
     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 15, 
      center: new google.maps.LatLng(52.355692, 5.619524), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 

     //add locations 
     var locations = [ 
      ['Hotspot1', 52.355889, 5.619535,'<?php echo $image ;?>'], 
      ['Hotspot2', 52.354349, 5.618924,'$get_google_map'] 
     ]; 

     //declare marker call it 'i' 
     var marker, i; 

     //declare infowindow 
     var infowindow = new google.maps.InfoWindow(); 

     //add marker to each locations 
     for (i = 0; i < locations.length; i++) { 
      marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
       map: map, 
       icon: locations[i][3] 
      }); 

      //click function to marker, pops up infowindow 
      google.maps.event.addListener(marker, 'click', (function(marker, i) { 
       return function() { 
        infowindow.setContent(locations[i][0]); 
        infowindow.open(map, marker); 
       } 
      })(marker, i)); 
     } 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
    </script>     
      <script async defer src="https://maps.googleapis.com/maps/api/js?key=hidden&callback=initialize"> 
      </script> 
<?php endwhile; ?> 
</div> 
<?php endif; ?> 

由於提前，

吉諾

Answer 1

缺少的$get_google_map迴音。不知道是什麼，表示要麼因爲它沒有定義

var locations = [ 
     ['Hotspot1', 52.355889, 5.619535,'<?php echo $image ;?>'], 
     ['Hotspot2', 52.354349, 5.618924,'$get_google_map'] 
    ]; 

應該

var locations = [ 
     ['Hotspot1', 52.355889, 5.619535,'<?php echo $image ;?>'], 
     ['Hotspot2', 52.354349, 5.618924,'<?php echo $get_google_map ;?>'] 
    ]; 

檢查在瀏覽器源輸出，看看有什麼locations數組實際上看起來也與console.log(locations)

登錄到控制檯

Answer 2

感謝您的快速回復。我改變了代碼到這一點：

  <script> 
      <?php $image = get_field('marker'); ?> 


      function initialize() { 
       //add map, the type of map 
       var map = new google.maps.Map(document.getElementById('map'), { 
        zoom: 15 
        , center: new google.maps.LatLng(52.355692, 5.619524) 
        , mapTypeId: google.maps.MapTypeId.ROADMAP 
       }); 
       //add locations 
       var locations = [ 
     ['Hotspot1', 52.355889, 5.619535, '<?php echo $image ;?>'] 
     , ['Hotspot2', 52.354349, 5.618924, '<?php echo $image ;?>'] 
    ]; 

因爲$ get_google_map是從以前的測試。但不幸的是， $ image不輸出任何東西。