Question

我想将谷歌地图插入我的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>

如果每个人都不喜欢＆＃34;我会很高兴。这将写一个简短的评论为什么。我试着提出好问题，如果遗漏或错误，我会改变它。

Answer 1

我可能会通过首先列出简单的地图来调试，因此跳过下面的所有代码

  // Construct the circle for each value in citymap.

它将帮助我确定哪些代码正在创建问题，然后将从那里开始。

如何将Google地图插入Wordpress

1 个答案: