jsの高度なカスタムフィールドの値をgoogle mapsのマーカーに使用します

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

ご返信ありがとうございます。 $ get_google_mapは前回のテストからだったので

  <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 ;?>'] 
    ]; 

：私はこれにコードを変更しました。しかし残念ながら、 $画像は何も出力しません。