如何在我的网站前端显示高级自定义字段插件的Google Map字段？

Question

我已经使用谷歌地图领域的高级自定义字段插件输入我的网站后端的地图值。有没有人能建议我在我的网站前端展示它的最好方法？

Answer 1

我找到了使用ACF的google地图字段的解决方案。您可以找到ACF google map field here的文档

如果您不想使用ACF的默认脚本，可以考虑使用以下方法：

在要显示地图的位置添加以下div：

<div id="map_canvas" style="height: 350px;width: 1200px; margin: 0.6em;"></div>

在wp_footer上方的站点页脚中添加以下代码

<?php $map = get_field('map', get_the_ID()); ?>

<script type="text/javascript"> 

  function initialize() {
        var myLatlng = new google.maps.LatLng(<?php echo $map['lat']; ?>, <?php echo $map['lng']; ?>);
        var myOptions = {
          zoom: 11,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
      }

      function loadScript() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
        document.body.appendChild(script);
      }

      window.onload = loadScript;
    </script>

Answer 2

我已经尝试了上面被接受的答案，但对我来说不起作用。我找到的简单解决方案是使用ACF插件从仪表板添加位置，并使用iframe显示它。

     <iframe width="400" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.ca/maps?center=<?php the_field('maps'); ?>&q=<?php the_field('maps'); ?>&zoom=14&size=300x300&output=embed&iwloc=near"></iframe><br />

在这里，google地图是我创建的自定义地图字段的名称。将其替换为所需的字段名称。