如何使用自定义字段值创建谷歌地图标记？答案

【问题标题】：how to create google maps marker with custom field values?如何使用自定义字段值创建谷歌地图标记？
【发布时间】：2018-05-02 18:23:45
【问题描述】：

我刚刚按照谷歌地图 API 的说明在我的网站上放置了一张谷歌地图：https://developers.google.com/maps/documentation/javascript/adding-a-google-map

复制该示例效果很好，但我想根据在 WordPress 的每个帖子中创建的自定义字段来获取标记的位置

<div id="map"></div>
    <?php $lati = get_field( "gmapslat" ); ?>
    <?php $lat = get_field( "gmapslng" ); ?>
    <script>
        function initMap() {
            var lat = '<?php echo $lat; ?>';
            var lng = '<?php echo $lng; ?>';
            var uluru = {lat: lat, lng: lng};
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 10,
                center: uluru
            });
            var marker = new google.maps.Marker({
                position: uluru,
                map: map
            });
        }
    </script>

    <script async defer
        src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDPGx6I2w6hzEmQNR2IrRKlFC9oUT-COvs&callback=initMap">
    </script>

</div>

什么时候地图只显示灰色。

【问题讨论】：

（拼写检查器可能不会指出缺少句号和主题，但无论如何尝试使用一个。）（欢迎来到 SO - 称呼、恳求、TIA 被视为噪音。注意How do I ask a good question?）
您在 javascript 控制台中看到了哪些错误？

标签： javascript php google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

您的 PHP 变量似乎有问题。此 PHP 变量 $lng 未声明。因此，您在 Javascript 变量 lng 中设置了一个未声明的 PHP 变量。

我还注意到以下几行：

<?php $lati = get_field( "gmapslat" ); ?>
<?php $lat = get_field( "gmapslng" ); ?>

这个变量 $lat 的值是经度吗？如果是这样，请改用 $lng。对变量使用有意义的名称会很有帮助。变量名称必须定义其内容的准确解释，而不管编程语言如何。查看此博客 15 Best Practices of Variable & Method Naming 可能会有所帮助。

重要提示：在每个 javascript 可变宽度坐标上使用 parseFloat() 以返回浮点数。否则，它将不起作用，您只会看到一张灰色的地图。要了解更多关于 parseFloat() 的定义和用法，您可以查看JavaScript parseFloat() Function。

以下是使用“-25.363, 131.044”作为PHP get_field() 函数返回的示例坐标的示例代码：

<div id="map"></div>
<?php 
        function get_field($args) {
          switch ($args) {
            case 'gmapslat':
              return '-25.363';
            break;
            case 'gmapslng':
              return '131.044';
            break;  
          }
        }
      $lat = get_field('gmapslat');
      $lng = get_field('gmapslng');
?>

    <script>

      function initMap() {
        var lat = parseFloat("<?php echo $lat; ?>");
        var lng = parseFloat("<?php echo $lng; ?>");
        var myLatLng = {lat: lat , lng: lng};

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: myLatLng
        });

        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: 'Hello World!'
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>

希望它可以帮助并快乐编码！

【讨论】：