Google Map Pro

Google Map embedded as iframe code via Custom Code element

After adding Google Maps to your Moto4 site, you must obtain and connect a Google API key. This key is required for the map to display correctly on your live website.

Google Maps Platform provides a $300 annual free credit, which is sufficient for most typical use cases, meaning many websites incur no cost.

Once this credit is exhausted, you will need to upgrade your billing plan to continue using Google Maps services without limitations.

Important! If you don't want to deal with creating your API Key, you might consider adding your Google Map location code as iframe code - so the map won't be customizable, but will still show the map, it will be interactive and linked to this location on Google Maps. You'll find instructions for this option at the end of this article.

Step 1. Obtain your API Key

Go to the Google Maps Platform and sign in with your Google account (or create one), then click Get Started.

If you are a new user

1. Complete the onboarding by clicking Finish account setup.
   
2. Once setup is complete, Google will automatically generate an API key. Copy it for later use.
   
3. Configure where the key is allowed to be used:
   
   • Select Website from the application restrictions dropdown.
   • Enter your website domain in the field provided.

Important:
If your domain changes, you must update it in the API key settings. Otherwise, the key will stop working.

You can always access and copy your key later from the Keys & Credentials section:

If you already have an account and API key

1. Go to Keys & Credentials.
2. Open your existing API key settings.
   
3. Under application restrictions:
   
   • Ensure Website is selected.
   • Add your domain using the Add button.

Step 2. Enable Google Maps on Your Website

1. Open your website editor.
2. Hover over the map element and click the Settings (gear icon).
   
3. Paste your API key into the Google API Key field.
   
4. Publish your website to apply the changes.

Recommendation

For security reasons, Google strongly recommends restricting your API key to specific domains and usage conditions. This prevents unauthorized use and protects your quota. Refer to the official Google Maps Platform documentation for detailed guidance.

Google Map as iframe code via Custom Code element

If you don't want to obtain an API key and just want a simple interactive map to be shown on your website page, without customization opportunity, below is the instruction on generating Google Map iframe code.

Step 1. Go to Google Maps

Step 2. Find your location

Step 3. Click Share > Embed a map

Step 4. Copy code

Step 5. Paste code to Custom Code element.