无法让谷歌地图 API 在 Wordpress 页面上加载

Question

我正在尝试在我的 wordpress 网站上显示我使用 google maps API 制作的地图。地图似乎加载了大约一半的时间。当它不加载时，我收到一条消息，提示我的 initMap() 函数在声明之前已被调用。有几个关于类似主题的问题被问到，但我无法让它为我工作。

  <title>Salt City Map</title>

  <div id="map"></div>
  <style type="text/css">
  /* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 650px;
  width: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

  </style>
  <!-- Replace the value of the key parameter with your own API key. -->


  <script>
  window.initMap = function(){
  var syr = {
    lat: 43.0466145,
    lng: -76.1555968
  };

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 15,
    center: syr
  });

  /*
    var testMarker = new google.maps.Marker({
      position: syr,
      map: map,
    }); 
  */

  var visitedPlaces = [
    ['Cathy\'s Cookie Kitchen', 43.0474772, -76.1551454, 'http://www.saltcityblog.com/2017/01/23/theres-something-for-everyone-at-cathys-cookie-kitchen/'],
    ['Liehs & Steigerwald', 43.0488035, -76.1521896, 'http://www.saltcityblog.com/2016/12/19/saturday-lunch-at-liehs-steigerwald/'],
    ['The Evergreen', 43.0507226, -76.153448, 'http://www.saltcityblog.com/2017/01/20/foreva-eva-evergreen-%f0%9f%8c%b2/'],
    ['Soleil Cafe', 43.0306934, -76.0053206, 'http://www.saltcityblog.com/2017/01/13/soleil-cafe-fayetteville/'],
    ['Peppino\'s', 43.0476904, -76.1554043, 'http://www.saltcityblog.com/2017/01/11/peppinos-neapolitan-award-winning-pizza/'],
    ['Original Grain', 43.0486229, -76.154517, 'http://www.saltcityblog.com/2017/01/07/original-grain-healthy-eats-downtown/'],
    ['Cafe Kubal', 43.0469596, -76.1542261, 'http://www.saltcityblog.com/2017/01/02/cafe-kubal-downtown-cafe/'],
    ['Empire Brewery', 43.0481735, -76.156796, 'http://www.saltcityblog.com/2016/12/18/empire-brewing-company-a-syracuse-staple/'],
    ['JJ\'s Miss Syracuse Diner', 43.0502739, -76.151665, 'http://www.saltcityblog.com/2016/12/01/jjs-miss-syracuse-diner/'],
    ['Roji Tea Lounge', 43.0494025, -76.1539753, 'http://www.saltcityblog.com/2016/11/23/late-night-tea-time-roji-tea-lounge/'],
    ['China Cafe', 43.0485356, -76.1568021, 'http://www.saltcityblog.com/2016/11/22/china-cafe-snowy-takeout/'],
    ['Otro Cinco', 43.0492578, -76.1534257, 'http://www.saltcityblog.com/2016/11/21/brunch-at-otro-cinco/'],
    ['Prime Steakhouse', 43.050767, -76.1516991, 'http://www.saltcityblog.com/2016/11/21/first-blog-post/']
  ];

  var marker = [];
  var infowindow = [];
  var contents = [];
  var contentString = [];

  for (var i = 0; i < visitedPlaces.length; i++) {
    var place = visitedPlaces[i]
    var placeLatLng = {
      lat: place[1],
      lng: place[2]
    };

    marker[i] = new google.maps.Marker({
      position: placeLatLng,
      map: map,
      title: place[0],
      url: place[3]
    });

    marker[i].index = i;

    contentString[i] = '<div id="content">' +
      '<div id="siteNotice">' +
      '</div>' +
      '<h1 id="firstHeading" class="firstHeading">' + marker[i].title + '</h1>' +
      '<div id="bodyContent">' +
      '<p>Check out our review <a href="' + marker[i].url + '">' +
      'here!</a></p>' +
      '</div>' +
      '</div>';

    infowindow = new google.maps.InfoWindow({
      content: contentString[i]
    });
    //console.log(contentString)
    marker[i].setClickable(true);


    marker[i].addListener('click', function() {
      //map.setCenter(marker[this.index].getPosition());
      infowindow.setContent(contentString[this.index]);
      infowindow.open(map, marker[this.index]);
    });
  }

}

  </script>
<script defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBUD-CNsmdQoT7yFXcyrcUqJJToNIoHles&callback=initMap">
  </script>

我尝试了删除“异步”和“延迟”的所有组合。我尝试将回调脚本放在函数声明之后。我看到的唯一模式是，如果我转到主页并单击地图按钮，它似乎可以工作，但如果我直接转到地图页面 (SaltCityBlog.com/map)，它就会中断。

我在控制台看到的错误是：

message:"initMap is not a function"
name:"InvalidValueError"
stack:"Error↵    at new Yc (https://maps.googleapis.com/maps/api/js?key=AIzaSyBUD-CNsmdQoT7yFXcyrcUqJJToNIoHles&callback=initMap:55:363)

谢谢。

Answer 1

尝试以这种方式声明 initMap

function initMap(){
   var syr = {
      lat: 43.0466145,
      lng: -76.1555968
   };
.....
....



...
}

Answer 2

您在

之后的已访问地点的循环中缺少分号

var place = visitedPlaces[i]

应该是

var place = visitedPlaces[i];