Google Maps API Setup

Mapsmith uses the Google Maps JavaScript API with Advanced Markers to render interactive maps. You'll need an API key and optionally a Map ID.

Step 1: Create a Google Cloud Project

  1. Go to the Google Cloud Console
  2. Click the project dropdown at the top of the page
  3. Click New Project
  4. Enter a project name (e.g. "My Website Maps") and click Create
  5. Make sure your new project is selected in the project dropdown

Step 2: Enable Required APIs

You need to enable three APIs for Mapsmith to work:

  1. Go to APIs & Services → Library
  2. Search for Maps JavaScript API and click Enable
  3. Search for Places API and click Enable
  4. Search for Geocoding API and click Enable

The Maps JavaScript API is required to render the map. The Places API powers address autocomplete in the location editor. The Geocoding API converts addresses into latitude/longitude coordinates when you add locations.

Step 3: Create an API Key

  1. Go to APIs & Services → Credentials
  2. Click + Create Credentials → API key
  3. Your new API key will appear. Copy it.

Restrict Your API Key (Recommended)

For security, restrict your API key so it can only be used on your website:

  1. Click on the API key you just created
  2. Under Application restrictions, select HTTP referrers (websites)
  3. Add your website URLs:
    • https://yourdomain.com/*
    • https://www.yourdomain.com/*
  4. Under API restrictions, select Restrict key and check:
    • Maps JavaScript API
    • Places API
    • Geocoding API
  5. Click Save

Step 4: Set Up Billing

Google requires a billing account to use the Maps APIs. However, Google provides a $200 monthly credit which covers approximately 28,000 map loads per month — more than enough for most websites.

  1. Go to Billing in the Cloud Console
  2. Create a billing account or link an existing one to your project

Step 5: Create a Map ID (Optional but Recommended)

A Map ID enables Advanced Markers, which are required for Mapsmith's custom pin styles. Without a Map ID, pins will fall back to default Google Maps markers.

  1. Go to Maps Management → Map Styles
  2. Click Create Map ID
  3. Enter a name (e.g. "Mapsmith Map")
  4. Select JavaScript as the map type
  5. Choose Vector for the rendering type (required for Advanced Markers)
  6. Click Save
  7. Copy the Map ID (it looks like a hex string)

Step 6: Enter Keys in Mapsmith Settings

  1. In your WordPress admin, go to Mapsmith → Settings
  2. Open the General tab
  3. Paste your API Key in the Google Maps API Key field
  4. Paste your Map ID in the Google Map ID field (optional)
  5. Click Save Settings

Troubleshooting

Map shows "For development purposes only" watermark

This means billing is not enabled on your Google Cloud project. Go to the Billing page and link a billing account.

Map shows a gray area or "Oops! Something went wrong"

This usually means:

  • The API key is incorrect or has been deleted
  • The Maps JavaScript API is not enabled
  • The API key is restricted to a different domain

Pins appear as default red markers instead of custom pins

Custom pin styles require a Map ID with Vector rendering. Create a Map ID in the Google Cloud Console and add it to the Mapsmith settings.

Geocoding fails when adding a location

Make sure the Geocoding API is enabled in your Google Cloud project and that your API key is not restricted to exclude it.