Javascript 无法在Wordpress页面上加载google地图API
我正试图在我的wordpress网站上显示我用谷歌地图API制作的地图。地图似乎有一半的时间都在加载。当它没有加载时,我会收到一条消息,提示在声明initMap()函数之前调用了它。在一个类似的话题上有一些问题被问到,但我一直没能让它对我起作用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
<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];