Google Maps

Google Maps plugin is used to display Google Map on different pages with all the available events added using WP Event Manager on your website. It also allows you to filter the events using different location filter options.

Installation

You can install Google Maps plugin using 2 different ways:

1. Automatic Installation : You can install plugin from backend of your WordPress. Click Here to see how you can do automatic installation.
2. Manual Installation : You can install plugin manually using SFTP or FTP tool as well. Click Here to see how you can do manual installation.

Complete Video Guide On Google Maps Add On

How to set up Google Maps API?

After installing and activating the plugin,

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

Note: Before making google map workable on your website, you need to enable some required changes in Google API Library. For that, follow these skeps:

1. Open your Google Console Account
2. Go to APIs & Services >> Dashboard
   
3. Click on “+ENABLE APIS AND SERVICES” link showing at top of the page, you will be on “Welcome to the API Library” page.
   
4. Here, enable following APIs: Maps JavaScript API , Geocoding API , Geolocation API , Places API

Google Maps General Settings

There are certain general settings that you need to alter to enable google maps functioning.

Follow the path WP-admin >> Event Manager >> Settings >> Google Maps General Settings.
Here, various settings need to be established.

• Google API language:This feature controls the language of the autocomplete results and Google maps. Enter the language code of the language you would like to use in the box adjacent to Google API language. list of language can be found here

  

• Google API default region: This feature controls the regions of Google API. Enter a country code; for example for United States enter US. You can find the country code here.

  

• Google address autocomplete(For Backend submission form): Display suggested results by Google when typing an address in the location field showing on BACKEND add new/edit event submission form.

  

• Google address autocomplete(For Frontend submission form): Display suggested results by Google when typing an address in the location field showing on FRONTEND add new/edit event submission form.

  

• Autocomplete country restriction: Enter the country code of the country which you would like to restrict the autocomplete results to. Leave it empty to show all countries.

  

• Location Marker: URL of google map icon/marker which represents locations on the map.

  

Google Maps Search Form Settings

Proximity search becomes even more helpful when you know what you are looking for. Using the filter options (Within, Miles, Order by) given on the search form, you can easily filter the events within a specific distance.

1. Go to WP-admin >> Event Manager >> Settings >> Google Maps Search Form Settings.
2. Here, you can see search form settings:
   

• Google address autocomplete: Displays suggested results by Google when typing an address in the location field.

Google address autocomplete feature saves the visitors’ effort to type the complete address. As soon as the visitor enters a few letters of the address, a list of all the possible addresses will be displayed as you can see in below-attached screenshot:


• Radius: Displays events when searched by radius.

  Enter single value as a the default setting or multiple values separated by comma to be displayed in the dropdown (For ex: 5,10,15,25,50,100).

• 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 and miles/kilometers fields and all the related events within your selected distance will appear so you can easily find relevant events that you were looking for.





• 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 ex: distance,title,featured,date).



• Display maps: Enable this option if you want to display map with google_map location above the list of search results.

Maps are more convenient to understand. So it’s a great idea to display the events on maps, so that users can find them quickly and conveniently. When displaying search results you can choose to also display Google map with markers representing each event’s location in the list results.



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

Google Maps Single Page Settings

Google Maps plugin enables the map functionality on event detail/single page as well. The google map on event detail page will display exact location of the event on it.

To change the default settings of the Google Map showing on event detail/single page, go to WP-admin >> Event Listings >> Settings >> Google Maps Single Page Settings, here you could see these settings:

• Display maps: Enable this option if you want to display the google map with event location on event detail page.
• Maps Width: Set the width of map in pixels or percentage (ex. 100% or 250px).
• Maps height: Set the height of map in pixels or percentage (ex. 100% or 250px).
• Maps Type: Set the type of map – Roadmap, Setellite, Hybrid, Terrain.
• Enable maps scrollwheel control?: Enable this option if you want to zoom maps in/out using mouse wheel.
• Zoom Level: Set the zoom level of 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 this below shortcode into the text area of the page.

   [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"]

• maps_type: Give map type like roadmap, satellite, hybrid or terrain. Click here for more info.
• height: Set map height in pixel.
• width: Set map width in pixel.
• categories: Give category slug separated by comma.
• event_types: Give event type slug separated by comma.
• featured: Featured events true / false.
• location: Set location value (ex: berlin,london).
• keywords: Set Keywords value (ex: party,meeting).

Single Event Location Map

Using Google Maps plugin, you can display google map on your event detail page as well. This is how the map will look on your page.

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

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

• event_id – Give perticular event id.
• maps_type – Give map type like roadmap, satellite, hybrid or terrain.Click here for more info.
• height – Set map height in pixel.
• width – Set map width in pixel.
• event_id – Give perticular 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,

1. Create 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/).

• event-google-maps.php template file lists the user’s maps.

Remember: If you have overridden template file and plugin frequently updating then you need to sync template file with new updates from the plugin’s template file for better functionality and new features.