What script to include for both Google Places and Geocoding

Question

I'm struggling to get a Google Places lookup AND Geocoding to work together in the same page. I think there's a conflict in how I'm loading the two APIs.

I'm using this one to load the places API

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=*****************&callback=initAutocomplete&types=address" async defer></script>

Places lookup works fine with that.

For Geocoding, this is the first line of code I'm trying to get working

geocoder = new google.maps.Geocoder();

And it works (well, doesn't throw an error) if I include this in my page:

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

But that's pretty much the same URL I already have, and including it breaks the Places lookup. When I have both scripts included I also get a warning telling me I've included the Maps API multiple times which may cause problems.

Please could someone show me which script(s) to include for both to work together? I'm finding the docs pretty confusing at this point to be honest.

Answer 1

It should work fine with just your first include. It contains the base Google Maps API plus the Places library.

var initMap = function () {
  var geocoder = new google.maps.Geocoder();
  geocoder.geocode({
    address: '10 Downing St, Westminster, London SW1A 2AA, UK',
  }, function (results, status) {
    if (status === 'OK') {
      var result = results[0];
      alert('latitude: ' + result.geometry.location.lat());
    }
    else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
};

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap" async defer></script>