Connect Google Maps to your MonstarX app

Google’s maps, places search and directions.

Type

For your app

Category

Maps and places

Connect with

API key

Google Maps Platform is Google’s service for maps data: the places, addresses, opening hours, reviews and routes behind Google Maps. Connect it and your app can look things up in that data.

You do not need it for a map itself. Every MonstarX app can draw a street map you pan and zoom, with pins, for free — see Maps in your app. Google Maps is for what those maps cannot know on their own.

What can you build with it?

• Address autocomplete: people start typing an address and pick it from Google’s suggestions.
• Place search: “cafés near me”, “physiotherapists in Fitzroy”, shown as a list and on the map.
• Business details: opening hours, phone number, rating and reviews for a place.
• Addresses on the map: turn a typed address into a pin (this is called geocoding).
• Driving directions between two places.

Before you start

• A Google Cloud account with a billing account attached. Google Maps Platform requires one, even within its free monthly usage (see Google’s pricing).
• A Google Cloud project for your app.

Get your key

1. In the Google Cloud console, pick or create a project and open Google Maps Platform.

2. Turn on the APIs your app will use. For the ideas above: Maps JavaScript API and Places API (New) for search and autocomplete, Geocoding API for addresses, and Routes API for directions.

3. Open Keys & Credentials and create an API key. Copy it (it starts with AIza).

4. Restrict the key. Under API restrictions, allow only the APIs you turned on.

Caution

This key reaches the browser, so anyone could copy it. Restricting it to your APIs keeps it from being used for anything else. Google also lets you restrict a key to your website addresses — but then Google refuses the lookups your app makes from its server, like turning an address into a map position. If your app does those, restrict by API only, or ask MonstarX to use a second key for the server.

Connect it in MonstarX

1. Open your project and click Backend in the top bar, then Cloud.

2. Under Connectors, click Connect beside Google Maps.

3. Paste the key into API key.

   

4. Click Connect Google Maps. The row shows Connected, and your preview restarts with the key.

Ask MonstarX to use it

You type	What happens
“On the booking form, autocomplete the address with Google Maps.”	Suggestions appear as people type; the chosen address is saved.
“Add a Find a studio near you page with Google Places search.”	A search box and results with names, addresses and ratings, pinned on the map.
“Show each café’s opening hours and rating from Google.”	Business details pulled from Google for each place.
“Give drivers directions from the depot to each delivery address.”	A route with the distance and time.

Security and privacy

• The key is a public key: it is used in people’s browsers, so it is not hidden. Restricting it in Google Cloud is what protects it.
• It is stored with this app only. Its name shows in Backend›Secrets.
• Only the project’s owner can connect, update or disconnect Google Maps.
• To replace the key, create a new one in Google Cloud, click Update keys on the Google Maps row, paste it and click Save keys. Publish again, then delete the old key.

Good to know

• Your maps keep their look: Google Maps adds data and search to your app, not Google’s map tiles.
• Google charges per request beyond its free monthly usage. Set a budget alert in Google Cloud billing.
• Want satellite views or Mapbox’s map styles instead? See Mapbox.
• Google’s terms have rules for showing its places data, such as crediting Google beside the results. Ask MonstarX to add the credit if your app lists places.

Frequently asked questions

Do I need Google Maps to show a map?

No. Every MonstarX app can draw maps for free with no key. Connect Google Maps only for places, autocomplete, business details or directions.

Why does Google say the API is not enabled?

Each Google Maps service has to be turned on in your Google Cloud project. Turn on the one named in the error, such as Places API (New).

Is it safe that the key is in the browser?

Yes, when it is restricted to the APIs your app uses. Google designs these keys to be used in web pages.

Google Maps or Mapbox?

Google Maps for places, business details and reviews. Mapbox for custom map styles and satellite views. Both can turn addresses into pins and give directions.

Related

Maps in your appFree maps with no key.

MapboxMap styles, satellite and geocoding.

Connect a service to your appHow app connectors work.

Secrets and API keysWhere your keys are kept.