How to add a Google Maps API key to your website
To ensure Google Maps displays correctly on your website, you’ll need to create and provide a valid Google Maps API Key. Here’s how to do it:
1. Create a Google Cloud Project
Go to the Google Cloud Console.
Sign in with your Google account.
Click on Select a project > New Project.
Enter a project name (e.g., “Website Maps”) and click Create.
2. Enable the Maps JavaScript API
In your Google Cloud Console, go to APIs & Services > Library.
Search for Maps JavaScript API.
Click on it and then click Enable.
3. Create API Credentials
Go to APIs & Services > Credentials.
Click Create Credentials > API Key.
A new API key will be generated—copy this key.
4. Restrict Your API Key (Recommended)
In the Credentials page, click on your new API key.
Under Application restrictions, select HTTP referrers (websites).
Add your website domain(s) here to prevent unauthorized use (e.g.,
https://www.yourdomain.com/*).Under API restrictions, select Restrict key and choose Maps JavaScript API.
Save your changes.
5. Provide the API Key to Our Team
Once you have your API key, please provide it to our team. We will handle adding it to the website to ensure Google Maps displays correctly.
Troubleshooting: When You See a Broken or Limited Map
If the map on your website appears with restrictions (e.g., gray background, error messages, or "This page can't load Google Maps correctly" overlay), it usually means the API key is missing, invalid, or improperly configured.
Following the steps above to create and configure your key will resolve these display issues.
Platform-Specific Notes
Legacy Sites (GuestPass): If you're using a legacy CiiRUS website, the API key must be added in the Settings Assistant under the GuestPass section.
Website Builder Sites: For sites built with the Website Builder platform, the maps feature is hidden by default to avoid setup errors. Once your API key is ready, please contact our team, and we’ll forward the request to our web development team to manually enable the map for you.
Why is the map hidden by default?
Many users encounter errors during the setup process. To ensure a clean and professional experience for your guests, the map is disabled unless configured correctly.
Need Help?
If you’re unsure where your site falls or need guidance on any of these steps, don’t hesitate to contact our support team - we’re here to help get everything working smoothly.