無法將Google地圖API加載到Wordpress頁面

Question

我試圖在我的wordpress網站上顯示我使用Google地圖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];