使用高级自定义字段值在js为谷歌地图标记

Question

我想使用高级自定义字段来放置Google Map图标。我更喜欢使用中继器字段，但首先我试图完成一个常规字段。图像字段输出为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没有输出任何内容