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

Question

我使用了高级自定义字段插件的Google Map字段来输入我网站后端的地图值.任何人都可以建议我在我网站的前端显示它的最佳方式吗？

Answer 1

我尝试了上面接受的答案,这对我没用.我找到的简单解决方案是使用仪表板中的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 />

这里的地图是我创建的自定义谷歌地图字段的名称.将其替换为您想要的字段名称.

Answer 2

我找到了使用 ACF 的谷歌地图字段的解决方案。您可以在此处找到 ACF 谷歌地图字段的文档

如果您不想使用 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>