如何将谷歌地图插入 Wordpress答案

【问题标题】：How to insert Google maps into Wordpress如何将谷歌地图插入 Wordpress
【发布时间】：2016-09-07 13:21:57
【问题描述】：

我想将谷歌地图插入我的 wordpress 网站。因为我想要地图上的圆圈，所以我不能使用为我插入地图的插件。所以我想使用这个网站上的代码Maps JavaScript API，我认为它应该可以工作。我复制了代码并将其插入到我的页面上的编辑器中，可以显示 js 和 html。我还得到了一个浏览器密钥，替换了指定位置的代码并确认了我的域。

src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&signed_in=true&callback=initMap">

但是页面上什么也没有。没有错误，没有地图，没有空白。

现在我认为原因可能是我没有添加任何版本。（如果没有添加版本，通常会自动使用实验版本）但尽管如此，我还是用 v=3 进行了尝试，这应该是发布版本。

src="https://maps.googleapis.com/maps/api/js?v=3key=MY_KEY&signed_in=true&callback=initMap">

现在我收到错误 NoApiKeys、InvalidVersion 和 MissingKeyMapError。但为什么？版本应该是有效的，我的密钥也是如此。我制作了许多不同的教程和类似的东西，但没有任何效果。

有人知道要改变什么来完成这项工作吗？

这是完整的代码，但和谷歌页面上的一样。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Circles</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
// First, create an object containing LatLng and population for each city.
var citymap = {
  chicago: {
    center: {lat: 41.878, lng: -87.629},
    population: 2714856
  },
  newyork: {
    center: {lat: 40.714, lng: -74.005},
    population: 8405837
  },
  losangeles: {
    center: {lat: 34.052, lng: -118.243},
    population: 3857799
  },
  vancouver: {
    center: {lat: 49.25, lng: -123.1},
    population: 603502
  }
};

function initMap() {
  // Create the map.
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 37.090, lng: -95.712},
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (var city in citymap) {
    // Add the circle for this city to the map.
    var cityCircle = new google.maps.Circle({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100
    });
  }
}

</script>
<script async defer
    src="https://maps.googleapis.com/maps/api/js?v=3key=MY_KEY&signed_in=true&callback=initMap">
</script>

如果每个“不喜欢”这篇文章的人都会写一个简短的评论，我会很高兴。我试着提出好的问题，如果有什么遗漏或错误我会改变它。

【问题讨论】：

您是否将整个代码（从 doctype 到 html 结尾）插入到默认的 WordPress 内容编辑器中？
是的一切。有错吗？
是的 :) 您正在尝试将页面插入页面，但这是不允许的（使用 iframe 除外...）。您应该在 map.js 文件中添加地图脚本，或者将其添加为主 js 文件的一部分。样式应该放在 style.css 文件中。使用wp_enqueue_script 从您的function.php 文件中调用google maps api。然后你应该为地图<div id="map"></div>添加你希望它显示的div（注意：你只能使用相同的id在每页添加一次）。
啊，好吧，但是如果我使用外国主题，我必须写一个子主题，对吗？我也可以在 iframe 中插入整个代码，还是有更简单的方法可以做到这一点？只是为了测试它是否是所有错误的原因？

标签： javascript wordpress google-maps google-maps-api-3

【解决方案1】：

我可能会首先列出简单的地图进行调试，从而跳过下面的所有代码

  // Construct the circle for each value in citymap.

它将帮助我查明是哪个代码造成了问题，然后从那里开始处理。

【讨论】：

也试过了，结果和以前一样……但谢谢。
好的，这意味着您需要使用wordpress方式，因为这不是使用iframe方式。检查这个指针stackoverflow.com/questions/11637755/…