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 />

此处地图是我创建的自定义Google地图字段的名称。将其替换为您想要的字段名称。

Answer 2

我找到了使用ACF谷歌地图字段的解决方案。您可以找到ACF谷歌地图字段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>

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

2 个答案: