Javascript 无法在Wordpress页面上加载google地图API

Javascript 无法在Wordpress页面上加载google地图API,javascript,html,wordpress,google-maps,Javascript,Html,Wordpress,Google Maps,我正试图在我的wordpress网站上显示我用谷歌地图API制作的地图。地图似乎有一半的时间都在加载。当它没有加载时,我会收到一条消息,提示在声明initMap()函数之前调用了它。在一个类似的话题上有一些问题被问到,但我一直没能让它对我起作用 <title>Salt City Map</title> <div id="map"></div> <style type="text/css"> /* Always set

我正试图在我的wordpress网站上显示我用谷歌地图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>

谢谢。

试着这样声明initMap

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



...
}

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

var place = visitedPlaces[i]
应该是

var place = visitedPlaces[i];

检查fi web控制台中是否有错误。这是我最初声明函数的方式,在阅读了另一篇stackoverflow文章后,我切换到window.initMap方法,希望它能改变在加载页面时声明函数的顺序。@Jesse try。。让我知道。。如果工作顺利的话。。否则。我们再看一看。。。但请检查web控制台错误提示。。可能你有…谢谢。有件事我不太明白。为什么有时贴图加载100%良好,没有错误。有时我会遇到两个“捕获语法错误:输入意外结束”错误和“initMap不是函数”错误。这更像是一种竞争条件,页面每次加载都不同,而不是语法问题。谢谢你的帮助!我可以看到您已经对函数进行了更改,并且去掉了initMap不是一个函数错误,但是我仍然得到了相同的错误,意外的标记var,因为您仍然缺少var place=visitedPlaces[I]之后的分号,所以您的脚本不会执行任何其他操作。
var place = visitedPlaces[i];