Learn how to setup Google Maps to work with MapsPro
The Google Maps setup needs this dedicated section of its own because it's the most complex to set up, requiring many different steps.
Like many providers, Google changes their user interface often, so it's better to let them guide you through the process of setting things up on their end. Follow the instructions in the Getting started with Google Maps Platform guide.
You will need to create a billing account with a valid credit card number, a project, enable the necessary APIs, and create to API Keys.
If you are just starting out or your site has significant traffic, consider using Mapbox with its generous free tier, and a much simpler setup process.
Required APIs
For MapsPro you'll need to enable the following APIs for your project
- Google Maps JavaScript API
- Google Static Maps API
- Google Maps Geocoding API
- Google Maps Geolocation API
- Google Places API
Browser and Server Keys
The browser key is needed for API requests that run directly on the browser, such as displaying maps, address autocomplete, and map it.
The server key is needed for API requests that run directly on the server, such as automatic geocoding on listing submissions, and the batch geocoder.
You cannot use the same key for browser and server.
In your Google Cloud project, you'll need to generate two separate API Keys.
- HTTP Referrers (web sites)
- IP Addresses (web servers, cron jobs, etc)
Restricting API Keys
This step is very important, especially for the browser key which can be easily found in the source of your site's page in the browser. By restricting the key you ensure that it can only be used on your site.
Browser Restriction
Google suggest using the *.example.com/* format. However, based on our client-base experience, this doesn't work. Instead, add your domain name example.com, without a sub-domain.
Our recommendation is to delay setting up the browser restriction until after you finish setting up and testing the Add-on. Otherwise, it's hard to determine if maps don't show due to browser restriction issues, or some other problem with the setup.
Server Restriction
When restricting the server, you need to use your server's IP address, not the domain name. If you change servers in the future, you also need to remember to update this restriction.