在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不输出任何东西。