The Google Maps add-on allows you to display your event location on Google Maps on your website and single event pages. It also helps visitors filter events through locations. 

Installing The Plugin

The installation process is the same for all the add-ons offered by WP Event Manager. They can be installed both automatically and manually.

1. Automatic Installation: You can install the plugin from the backend of your WordPress. Click here to see how you can install the plugin automatically.
   
2. Manual Installation: You can also install the plugin manually using SFTP or FTP tools. Click here to see how you can install the plugin manually.
   

Watch the entire video for a better understanding

How to set up the Google Maps API?

After installing and activating the plugin, here are the steps you need to take to set up the Google Maps API.

1. Create an API key from your Google Console account. You can refer to this link to learn how to get an API key.
2. Insert the API Key into the backend of your website; follow the path: WP-admin >> Event Manager >> Settings >> General >> Google API Key.
   

1. Save changes.

Note: Before making the Google Maps addon active on your website, you need to make some changes in the Google API Library. Follow the steps below for that:

1. Open your Google Console Account.
2. Go to APIs & Services >> Dashboard.
   
   
   
   
3. Click on the “+ENABLE APIS AND SERVICES” link shown at the top of the page, and you will be on the “Welcome to the API Library” page.
   

   

   
   
4. Here, enable the following APIs: Maps JavaScript API, Geocoding API, Geolocation API, Places API.

   

   
   

Google Maps General Settings

Certain changes are needed in the General Settings section to enable Google Maps to function on your website.

Follow the steps below to find the settings section:

Follow the path WP-admin >> Event Manager >> Settings >> Google Maps General Settings.

Here are the options you will get in the General Settings section.

• Google API language: This language controls the language that is used in the autocomplete results on Google Maps. You need to enter the code of the language that you want to use in the box attached to the Google API language. Get the entire list of languages here.
• Google API default region: This option manages the region of the Google API. You need to enter the country code in this section to fill in the details. For example, the US is the code for the United States. Explore the entire list of country codes here.
• Google address autocomplete(For Backend submission form): This option displays the result suggested by Google Maps when you type an address in the location field of the event submission form at the backend. You, as an admin, can enable or disable the option as per your needs.
• Google address autocomplete(For Frontend submission form): This option displays the result suggested by Google Maps when you type an address in the location field of the event submission form at the Frontend. You, as an admin, can enable or disable the option as per your needs.
• Autocomplete country restriction: In this section, you need to add the country code that you would like to restrict in the Autocomplete country results. You can leave this option empty to display all countries.
• Location Marker: You need to add the URL of the Google Maps icon or marker that represents the location on the map.
• Map Style JSON: With this option, you can select your preferred theme and design for your event map. Here, you need to paste the JSON map styling code.

To get the code, here are the steps you need to take:

1. Click on the “Generate JSON style from here” option. 
   

1. Select your preferred theme. 
   

1. Click on the Finish button. 
   

1. Copy the code from here. 
   

1. Paste the code in the Map Style JSON box. 
   

1. Click on the Save Changes button.
   

New Styles are added to Google Maps

1. Go to wp-admin.
   
2. Click on Event Manager.
3. Select the Settings option.
   

1. Click on the Google Maps General Settings tab.
   

1. Go to the “Select Tooltip Style” option.
   
2. Choose your preferred style from the following:
1. Default
   

1. Style 2
   

1. Style 3
   

1. Save changes.
   

The new style appears in the location section of the event details page when the map marker icon is clicked.

It is also visible in the map section of the event listing page when the map marker icon is clicked.

Google Maps Search Form Settings

The search for nearby events becomes easier when you know what exactly you are looking for. The Google Maps Search Form Settings allow you to make your search more specific by mentioning filtering options like Within, Miles, and Order by in the search form. This is to help you trace all the events occurring within a specific area.

To find the Google Maps Search Form Settings, follow the steps below:

1. Go to WP-admin >> Event Manager >> Settings >> Google Maps Search Form Settings.
   

Here, you can see the search form setting options that include the following:

1. Google address autocomplete: Displays the results suggested by Google when you type an address in the location field. This particular feature saves the time and energy of a visitor to type an entire address. As soon as the visitor enters a few letters of a particular address, a list of all the possible addresses is displayed instantly,  as shown in the screenshot below.

1. Radius: Displays all the events that are searched within a radius. Here, you need to. Enter a single value as the default setting or multiple values separated by a comma to be displayed in the dropdown (For ex: 5,10,15,25,50,100). 
   
2. Within Miles/Kilometers: Displays events within the specified range of miles or kilometers to the location mentioned.
   

If you are looking for events within a specific distance from the location you entered into the “Location” field in the search form, then you simply have to select options from within the miles/kilometers fields, and all the related events within your selected distance will appear, so you can easily find the events that are relevant to what you were looking for.

1. Order By: Enter the values you want to use in the “Sort by” dropdown select box. Enter comma-separated (,) in the order that you want the values to appear, any of the values (For example: distance, title, featured, date).
   

1. Order: Filter events by distance using ascending or descending order. To allow visitors to filter events by distance in ascending or descending order, you need to follow the steps below:
   
1. Select Asc or Desc from the Order dropdown to let people filter events based on distance in ascending or descending order.
   

1. Click on the Save Changes button.
   

1. Display maps: Enable this option if you want to display a map with Google Map location, above the list of search results.
   
2. Maps are more convenient for visitors to understand. So it’s a great idea to display the events on maps. While showcasing the search results, you can choose to display Google Maps with markers representing each event’s location in the list of results.
   

1. Maps Width: Set map width in pixels or percentage (For ex. 100% or 250px).
2. Map's height: Set map height in pixels or percentage (For ex. 100% or 250px).
   
3. Maps Type: Set type of map – Roadmap, Satellite, Hybrid, Terrain.
   
4. Enable Maps scrollwheel control?: Enable this option if you want to zoom maps in/out using the mouse wheel.

Google Maps Single Page Settings

The Google Maps plugin enables you to add the map functionality to the event detail page as well. The Google map on the event detail page displays the exact location of the event.

To change the default settings of the Google Map shown on the event detail/single page, follow the steps below:
WP-admin >> Event Manager >> Settings >> Google Maps Single Page Settings,

1. Display maps: Enable this option if you want to display the Google map with the event location on the event detail page.
   
2. Maps Width: Set the width of the map in pixels or percentage (ex. 100% or 250px).
   
3. Map's height: Set the height of the map in pixels or percentage (ex. 100% or 250px).
   
4. Maps Type: Set the type of the map – Roadmap, Satellite, Hybrid, Terrain.
   
5. Enable maps scrollwheel control?: Enable this option if you want to zoom in/out maps using the mouse wheel.
   
6. Zoom Level: Set the zoom level of the map. Click here for more info about this.

All In One Map

Do you want to display all your events on a single Google map only? If so, you can do it just using a single-line shortcode.

1. Go to WP-admin >> Pages >> Add New.
   
2. Add the below-mentioned shortcode into the text area of the page.
   

1. [events_map maps_type="ROADMAP" height="100px" width="100px" categories="Comma separate slugs" event_types="Comma separate slugs" featured="false" cancelled="false" location="location name" keywords="search keywords"]

1. maps_type: Mention the map type, like roadmap, satellite, hybrid, or terrain. Click here for more info.
   
2. height: Set the map height in pixels.
   
3. width: Set the map width in pixels.
   
4. categories: Give category slugs separated by a comma.
   
5. event_types: Give event type slugs separated by a comma.
   
6. featured: Featured events true/false.
   
7. location: Set location value (ex: berlin,london).
   
8. Keywords: Set Keywords value (ex, party, meeting).

Google Maps on Single Event Page

1. [single_event_location_map event_id="123" maps_type="ROADMAP" height="100px" width="100px"]

2. event_id – Give a particular event ID.
   
3. maps_type – Add the map types like roadmap, satellite, hybrid, or terrain. Click here for more info.
   
4. height – Set the map height in pixels.
   
5. width – Set the map width in pixels.
   
6. event_id – Give a particular event ID.
   

Advanced: Overriding/Customizing the templates

For overriding or customization, template files can be found in the wp-event-manager-google-maps/templates/ directory.

To override a template file, follow the steps below:

1. Create the directory “wp-event-manager-google-maps” under your theme folder.
   
2. Copy the template file to “/wp-content/yourtheme/wp-event-manager-google-maps/” directory.
   
3. Your theme will use all the template files from the “/wp-content/yourtheme/wp-event-manager-google-maps/” directory instead of the plugin’s template file (/wp-content/plugins/wp-event-manager-google-maps/).
   
4. The event-google-maps.php template file lists the user’s maps.

Remember: Since our plugins are updated regularly, if you customize our template files, be sure to keep them synchronized with the latest versions to ensure compatibility and access to new features and enhancements.