google.maps.places is undefined

Question

I have a website that loads 3 seperate "views" of a location via Google Maps, Street and Places.

Please see my code below:

I have finally gotten Maps and Street view to work properly but am struggling a bit with this one.

I have a tab that displays the same as map but with places added.

<script type="text/javascript"    src="http://maps.googleapis.com/maps/api/js?v=3&key=....&sensor=false&callback=initializeMap"></script>  <script type="text/javascript"> var myLattitude = <?php echo $data["lattitude"]; ?>; var myLongitude = <?php echo $data["longitude"]; ?>; var poiMap; var infowindow;  function initializePoi() {             var poiCentre = new google.maps.LatLng(myLattitude, myLongitude);              poiMap = new google.maps.Map(document.getElementById('poi-canvas'), {                 center: poiCentre,                 zoom: 15             });              var request = {                 location: poiCentre,                 radius: 500,                 types: ['store']             };             infowindow = new google.maps.InfoWindow();             var service = new google.maps.places.PlacesService(poiMap);             service.nearbySearch(request, callback);         }          function callback(results, status) {             if (status == google.maps.places.PlacesServiceStatus.OK) {                 for (var i = 0; i < results.length; i++) {                     createMarker(results[i]);                 }             }         }          function createMarker(place) {             var placeLoc = place.geometry.location;             var marker = new google.maps.Marker({                 map: poiMap,                 position: place.geometry.location             });              google.maps.event.addListener(marker, 'click', function() {                 infowindow.setContent(place.name);                 infowindow.open(poiMap, this);             });         } 

Now This initializes properly but the console throws the following error: TypeError: google.maps.places is undefined

I just want to know why I get this error, I like having clean errorless code.

The places do actually show up properly and everything.

Answer 1

You should add the option libraries=places in the Google API URL

In your case you should replace the following:

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

With this:

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

Look at the end of the src=""

Answer 2

Now, you have to use https instead of http.

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

Everything else is same as previous answer mentioned.