谷歌地圖的地方沒有定義

我有一點與嘗試在我的節點應用程序中使用谷歌地圖的問題。我已經加載地圖並獲得我的位置。我試圖實現谷歌代碼，所以我可以讓用戶搜索和本地地方出現。我使用的是谷歌API頁面的代碼，並遇到了問題。當我運行代碼時，其返回值「google.maps.places未定義」。我一直在尋找這個問題，似乎可以解決它。以下是代碼，預先感謝！谷歌地圖的地方沒有定義

function initialize() { 
    var mapProp = { 
     center:new google.maps.LatLng(51.508742,-0.120850), 
     zoom:16, 
     mapTypeId: 'roadmap' 
    }; 
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 
    var infoWindow = new google.maps.InfoWindow({map: map}); 

    //GEOLOCATION START 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function(position) { 
      var pos = { 
       lat: position.coords.latitude, 
       lng: position.coords.longitude 
      }; 

      infoWindow.setPosition(pos); 
      infoWindow.setContent('Location found.'); 
      map.setCenter(pos); 
     }, function() { 
      handleLocationError(true, infoWindow, map.getCenter()); 
     }); 
    } else { 
     // Browser doesn't support Geolocation 
     handleLocationError(false, infoWindow, map.getCenter()); 
    } 
} 

function handleLocationError(browserHasGeolocation, infoWindow, pos) { 
    infoWindow.setPosition(pos); 
    infoWindow.setContent(browserHasGeolocation ? 
     'Error: The Geolocation service failed.' : 
     'Error: Your browser doesn\'t support geolocation.'); 
} 
//GEOLOCATION END 

//PLACES START 
var input = document.getElementById('pac-input'); 
var searchBox = new google.maps.places.Autocomplete(input); 
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 

map.addListener('bounds_changed', function() { 
    searchBox.setBounds(map.getBounds()); 
}); 

var markers = []; 
// Listen for the event fired when the user selects a prediction and retrieve 
// more details for that place. 
searchBox.addListener('places_changed', function() { 
    var places = searchBox.getPlace(); 

    if (places.length == 0) { 
     return; 
    } 

    // Clear out the old markers. 
    markers.forEach(function(marker) { 
     marker.setMap(null); 
    }); 
    markers = []; 

    // For each place, get the icon, name and location. 
    var bounds = new google.maps.LatLngBounds(); 
    places.forEach(function(place) { 
     if (!place.geometry) { 
      console.log("Returned place contains no geometry"); 
      return; 
     } 
     var icon = { 
      url: place.icon, 
      size: new google.maps.Size(71, 71), 
      origin: new google.maps.Point(0, 0), 
      anchor: new google.maps.Point(17, 34), 
      scaledSize: new google.maps.Size(25, 25) 
     }; 

     // Create a marker for each place. 
     markers.push(new google.maps.Marker({ 
      map: map, 
      icon: icon, 
      title: place.name, 
      position: place.geometry.location 
     })); 

     if (place.geometry.viewport) { 
      // Only geocodes have viewport. 
      bounds.union(place.geometry.viewport); 
     } else { 
      bounds.extend(place.geometry.location); 
     } 
    }); 
    map.fitBounds(bounds); 
}); 



google.maps.event.addDomListener(window, 'load', initialize); 
} 
]);

對於任何人懷疑藏漢我有這個頁面的地圖加載上。我在實際頁面上有我的API密鑰

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&key=......&sensor=false&callback=initializeMap&libraries=places"></script>

來源

2017-04-12 TomTub

是您的初始化代碼等待谷歌阿比JS加載？例如在文檔就緒事件上運行初始化函數，而不僅僅是在頁面的主體中。否則，這是一個競爭條件，首先發生哪一個。 – scipilot

你在哪裏有你在script標籤中指定的'initializeMap'回調？所有需要谷歌的行爲都應該在其中，否則你會在谷歌加載之前執行代碼，這是否有意義？ – maurycy

我已經在頁面初始化時調用地圖。所以即時調用ng-init =「初始化（）」 – TomTub

對於AngularJS，我使用的是GoogleMapAPI。在documentation中，您可以看到必須等到api完全初始化。

我認爲你有同樣的問題，但採用這種方法，你可以在更高的水平上解決它。

希望這可以幫助你

來源

2017-04-12 13:07:23

地圖顯示正常，只是搜索欄無法正常工作。 – TomTub

谷歌地圖的地方沒有定義

回答

相關問題