Googleマップの場所が定義されていません

Question

私のノードアプリケーションでGoogleマップを使用しようとすると少し問題があります。私はマップをロードし、これまでのところ私の位置を取得しています。私はユーザーに検索とローカルの場所が表示されるようにGoogleコードを実装しようとしています。 Google 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); 
} 
]); 

私は地図がロードされるページでこれを持っていると思います。私は私がGoogleMapAPIを使用していますAngularJSについては、実際のページ

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

Answer 1

に私のAPIキーを持っています。 documentationでは、APIが完全に初期化されるまで待つ必要があることがわかります。

私は同じ問題があると思いますが、このアプローチではより高いレベルで解決することができます。

ご希望の場合は