Google Maps

 
Google Map
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.
 
Watch this video for more clarification.
 
How to set up Google Map API?
After installing and activating the plugin, first of all you need to create API key from your Google Console account. You can refer to this link for how to get API key. Once you get Google API key, insert it into the backend of your website at WP-admin >> Event Listings >> Settings >> General >> Google API Key and save changes.
 
Before making google map workable on your website, you need to enable some required changes in Google API Library. For that, follow these steps:
  • Open your Google Console Account
  • Go to APIs & Services >> Dashboard
  • Click on “+ENABLE APIS AND SERVICES” link showing at top of the page, you will be on “Welcome to the API Library” page
  • Here, enable following APIs: Maps JavaScript API , Geocoding API , Geolocation API , Places API
 
For more clarification, you can see below screenshots:
 
Google API Dashboard
 
Google API and Services
 
Google API Enable
 
Google Maps General Settings
Go to WP-admin >> Event Listings >> Settings >> Google Maps General Settings. Here, you can see these options:
 
Google Maps General Settings
 
  • 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. List of available languages 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.
 
This is how google address autocomplete locations will display on front end event submission form:
 
autocomplete
 
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 filtes the events within specific distance.
 
Events Proximy search
 
Go to WP-admin >> Event Listings >> Settings >> Google Maps Search Form Settings. Here, you can see search form settings:
 
Google Maps Search Form Settings
 
  • Google address autocomplete: Display suggested results by Google when typing an address in the location field showing on search form on event listing page.
     
    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:
     
    Google Address Autocomplete
  •  
  • Radius: To search events by radius. Enter single value to be the default or multiple values comma separated to be displaed as a dropdown (For ex: 5,10,15,25,50,100).
     
    If you are looking for events within specific distance from the location you entered into the “Location” field in 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 a relevant events that you were looking for.
     
    Events Proximy search
     
    Distance Units
  •  
  • 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).
     
    Google Maps add-on enhance the “order by” functionality as well and now let you create a dropdown select box and let the users change the order of the results. You can easily create a dropdown select box with any of the values: Distance, Title, Featured and date to be sorted by.
     
    Sort-by Dropdown Menu
  •  
  • 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.
     
    Events Proximy search
  •  
  • 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.
 
Google Map At Single Event Page
 
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:
 
Google Map Single Page 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 single google map only? If so, you can do it just using a single line shortcode.
 
The Shortcode Setup
 
Go to WP-admin >> Pages >> Add New. Here, 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.
 
The Shortcode Setup
 
Go to WP-admin >> Pages >> Add New. 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.
The Shortcode Setup
 
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, first you need to create directory “wp-event-manager-google-maps” under your theme folder and copy the template file to “/wp-content/yourtheme/wp-event-manager-google-maps/” directory. 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 overrided 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.