Google Provider

note: Google services require an API key enabled for both the Geocoding API and the Maps JavaScript API (more on key configuration below). Obtain here. For more options and configurations, see the Google Maps developer docs.

<Map provider="Google" />

import { GoogleProvider } from 'leaflet-geosearch';

const provider = new GoogleProvider({ apiKey: '__YOUR_GOOGLE_KEY__' });

// add to leaflet
import { GeoSearchControl } from 'leaflet-geosearch';

map.addControl(
  new GeoSearchControl({
    provider,
    style: 'bar',
  }),
);

Optional parameters

Google supports a number of optional parameters which must be specified when loading the JavaScript API.

const params = {
  apiKey: '__YOUR_GOOGLE_KEY__',
  language: 'nl', // render results in Dutch
  region: 'nl', // prioritize matches within The Netherlands
};

new GoogleProvider({ ...params });

Configuring your API key

Application restrictions (highly recommended)

Because your API key will be exposed with each request from the client, it is highly recommended that you should add an application restriction to any of your public-facing keys to limit the HTTP referrers from which requests will be accepted - for more information on how to configure this restriction, see the documentation.

API restrictions (optional)

Your may choose not to apply any API restrictions to your key, leaving it in an "Unrestricted" state. However, if you do wish to limit the APIs that can be accessed with your key, you will need to make sure that it as configured to at least make use of both the Geocoding API and the Maps JavaScript API in order for web client-based geocoding to work.