Google map
Google Map
MayorCity theme has integrated Google Map which must be activated by getting Google Map API Key, see instruction located in the following location:
Location: Appearance → Customize → Google Map
There are links and instruction how to get your Google Map API Key, as well some map settings like zoom, coordinates to indicate the location of your city.
After getting Google Map API Key paste it input shown in the right-side picture and save it. Once you have connected you should choose place on the map or show location by indicating coordinates (latitude and longitude) of your city location. See next picture illustration for that.
Here as shown on the right-side picture you can choose the location of your city by clicking the button Choose place on map.
Alternatively, you can choose the location of your city manually by indicating coordinates (pasting latitude and longitude of your city in the inputs named correspondingly).
There are two types of built-in map in MayorCity Theme:
- Main Map (Big Map) – which is displayed on Front Page and Place Posts Page
- Small Map of single page – which is displayed on contact page, form pages, events post single pages and places posts single pages.
You can change the zoom settings of Google map by indicating number of zoom as shown on the right-side picture.
Create API keys
The API key is a unique identifier that authenticates requests associated with your project for usage and billing purposes. You must have at least one API key associated with your project.
To create an API key use this instructions: Create API KEY.
Enable Maps JavaScript API
Before you start using the Maps JavaScript API, you need a project with a billing account and the Maps JavaScript API enabled. To learn more, see Set up in Cloud Console.
If the Maps JavaScript API is not listed, you need to enable it. See instructions Enable Maps Javascript API.
Enable Places Library to activate autocomplete feature on Google Map
Autocomplete is a feature of the Places library in the Maps JavaScript API. You can use autocomplete to give your applications the type-ahead-search behavior of the Google Maps search field. The autocomplete service can match on full words and substrings, resolving place names, addresses, and plus codes. Applications can therefore send queries as the user types, to provide on-the-fly place predictions.
Before using the Places library in the Maps JavaScript API, first ensure that the Places API is enabled in the Google Cloud Console, in the same project you set up for the Maps JavaScript API.
To view your list of enabled APIs:
- Go to the Google Cloud Console.
- Click the Select a project button, then select the same project you set up for the Maps JavaScript API and click Open.
- From the list of APIs on the Dashboard, look for Places API.
- If you see the API in the list, you’re all set. If the API is not listed, enable it:
- At the top of the page, select ENABLE API to display the Library tab. Alternatively, from the left side menu, select Library.
- Search for Places API, then select it from the results list.
- Select ENABLE. When the process finishes, Places API appears in the list of APIs on the Dashboard.
For more instruction see Enable Places Library.
Enabling Places Library will activate autocomplete of places coordinates on admin and front end section as well. Below you can see illustration where it will be effected:
On Events posts (admin area):
On Events form (front-end area):
On Places posts (admin area):
On Places form (front-end area ):
