2016-11-14 28 views
-1

我正在使用Google Maps/Places API的網站上工作。我已驗證我的API密鑰工作正常,所以這不是問題。我甚至無法讓地圖顯示 - 這是我的問題。
我已經完全複製了該示例,但它仍然無法正常工作。
Here's my code在一個要點,因爲它是一些文件。它應該是可運行的,這就是所有的內容。Google Map JS Not Showing(試過其他答案)

我到目前爲止已經試過
- 把所有的文件準備就緒功能(jQuery的)。
- 將它從getCurrentPosition函數中取出,這樣它就出現在main.js文件中。
- 在HTML文件中移動腳本鏈接的位置,在任何位置都不會改變。
- 如果我console.log()lat和long變量,他們打印我的位置。但是,當我將它們鍵入到Chrome開發工具控制檯時,它們是「未定義的」。但是,我的「地圖」變量將地圖div打印到控制檯。
- 使用靜態座標,而不是從導航器HTML5元素收集的座標。
- 設置地圖div的像素,百分比和vh/vw的高度和寬度。它採取了屏幕 - 我知道,因爲我給它一個背景顏色顯示。
- 添加參數到我的API負載結束:&callback=initialize&libraries=places

這是我第一次使用地圖,所以我完全迷失在這裏。我跟着Google's example去發球,但什麼都沒有。

WebStorm強調了所有的google.maps.x類,並聲稱它們是「未解決的變量或類型」。這可能是我的問題,但我不知道是什麼原因或如何修復它。並且要清楚,我已經瀏覽了每一篇關於Stack Overflow的文章,但都沒有找到解決方案。

UPDATE:
- 我只是試圖複製並從谷歌粘貼this example正是顯示爲(我的API密鑰,當然)它,它仍然沒有奏效。我把它放在HTML中的腳本標籤中。它的唯一工作方式是刪除initMap()函數 - 不是它的內容,只是將它聲明爲一個函數。那麼爲什麼這裏的表演很怪異呢?它正在處理函數內部的所有內容(在HTML中的腳本標記中),就好像它全部未定義一樣,僅僅因爲它位於函數中......在最高範圍級別。

+0

'initialize'不是全局可訪問的。把它從'getCurrentPosition'回調中移出 – Lucius

+0

這是我嘗試過的事情列表中的第二個。我也試着把所有東西都拿出來,只是爲它設置靜態座標,沒有改變。 – Mazzone

回答

2

您正試圖在Google Maps SDK加載之前運行main.js。移動它上面main.js' in index.html`:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&libraries=places"></script> 
    <script src="js/plugins.js"></script> 
    <script src="js/main.js"></script> 

然後,取出initialize功能:

if ("geolocation" in navigator) { 
console.log("Geolocation is enabled."); 
navigator.geolocation.getCurrentPosition(function (position) { 
    var lat = position.coords.latitude; 
    var long = position.coords.longitude; 
    var map; 
    var service; 
    var infoWindow; 

    console.log("lat: " + lat); 

    //Initialize Google Map. Starts at user's location. 

     var userLocation = new google.maps.LatLng(lat, long); 

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

     var request = { 
      location: userLocation, 
      radius: '500', 
      types: ['store'] 
     }; 

     service = new google.maps.places.PlaceService(map); 
     service.nearbySearch(request, callback); 


    //Callback function for nearbySearch 
    function callback(results, status) { 
     if (status == google.maps.places.PlacesServiceStatus.OK) { 
      for (var i = 0; i < results.length; i++) { 
       var place = results[i]; 
       createMarker(results[i]); 
      } 
     } 
    } 
}); 
} else { 
console.log("Geolocation is disabled."); 
//Inform user why we use location 
//Allow user to enter location manually 
} 

這對我的作品。

+0

謝謝,這也適用於我。爲什麼Google會顯示初始化函數? – Mazzone

+1

Google示例只有一個函數,只有在SDK加載後纔會從回調中觸發。 – sideroxylon