Google map loader api, how to include libraries like places

You want to include "drawing" | "geometry" | "localContext" | "places" | "visualization"?

Here you go:

import { Loader } from "@googlemaps/js-api-loader"

const loader = new Loader({
  apiKey: API_KEY,
  mapId: MAP_ID,
  version: "weekly",
  libraries: ["places"]
});

If you were trying to access places on the google map instance it would have failed because it was not included. Now with adding the library it will work, here is some example code:

var service = new google.maps.places.PlacesService(map);

const request = {
  query: value,
  fields: ['name', 'geometry']
}

service.findPlaceFromQuery(request, function(results, status) {
  if (status === google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      const place = results[i];
      if (!place.geometry || !place.geometry.location) return;

      new google.maps.Marker({
        map: map,
        position: place.geometry.location,
      });
    }
    map.setZoom(13);
    map.setCenter(results[0].geometry.location);
  }
});

Blog

Google map loader api, how to include libraries like places

GreggHume

Join Our Newsletter. No Spam, Only the good stuff.

Related