Advanced Map Addon

With this addon, you can create the professional shortcode for Map view with 2 popular styles including OpenStreetMap instead of Google Map, and enjoy new features such as Street, Region, etc. for detailed and precise filtering. Display filters and events next to the map in a new view.

Installation:

In order to install the addon, first, make sure MEC is installed and activated. Then go to WordPress Plugins > Add new and click on Add New. Then drag the zip file of the addon to the file selection directory. Then click on Install and then on Activation.

install 1 - Advanced Map Addon
install 2 - Advanced Map Addon

NOTE: The addon works with All versions of MEC Pro.

Now your addon is activated but before moving on, use the link below to make sure your Google MAP API is enabled: Google Maps Options – Modern Events CalendarYou will see map settings like this:

settings module advanced map 1 - Advanced Map Addon

How to work with the Advanced API Addon?

1. Getting the API Key

Follow the steps explained in this article: https://developers.google.com/maps/documentation/javascript/get-api-key/ 

Note 1: You need to enable “Maps JavaScript API” from API Library

Note 2: you can enable more APIs from Google API Library e.g. Place API, Direction API, Geocoding API, Google Calendar, etc (All in One API)

Note 3: If you want to use the OpenStreetMap, please select the Openstreetmap option from the dropdown.

settings module advanced map 2 - Advanced Map Addon

Note 4: To use GPS coordinates (latitude and longitude), first you need to enable Google Maps Geocoding API for your API Key. Please go to the Google Maps APIs to find Google Maps Geocoding API, and click on the name, then in the new page click on GET A KEY for your API. Also, to add GPS coordinates, please go to  latlong.net 

Note 5: For your events, you need to enable “Maps JavaScript API” for Google Map (the basic plan  – if you want, you can enable more map APIs)

Also, you can use the Address to find in Google Map (it works just for enabled Google Map API):

MEC locations - Advanced Map Addon
mec location address - Advanced Map Addon

2. Zoom level

You can change the zoom level using this option.

For the Google Maps module on the single event page. In Google Maps skin, it will calculate the zoom level automatically based on event boundaries which range from 5 to 21 for the zoom value.

3. Google Maps Style

Set a style for your map on a single event page. You can find these styles by their name on Google.

MEC locations map style - Advanced Map Addon

4. Direction on a single event

There are two different styles for showing your exact location on the map.

  • Simple Method
  • Advanced Method
Direction - Advanced Map Addon
Direction 2 - Advanced Map Addon

5. Lightbox Date Format

Using this field, you can define the date format of your lightbox. The default value is M d Y.

6. Don’t load Google Maps API library 

By activating this option, the Google Maps API library won’t be loaded on your website anymore (this might cause some issues while loading the map).

7. Fullscreen Button

If you want to have a fullscreen button on your map, you can enable this option.

Fullscreen Button - Advanced Map Addon

8. Default map

You can choose google or OpenStreetMap as a default map.

default map - Advanced Map Addon

9. Scroll Wheel 

By scrolling on the map view, you can zoom in and out.

Creating a shortcode with the MAP View Skin

In order to enable this feature, head over to MEC Shortcode Page. Now what you need to do is to create a new shortcode with MAP View skin. To understand how to create a full map shortcode using MEC Advanced MAP Addon, first, you need to get familiar with the options that are available on this page.

Options are listed in the image below and there is further info available below the image.

advanced map Map Views - Advanced Map Addon
  1. Skin options (i.e. Map View Skin)
  2. Calendar Start Date options 
  3. Display maximum events options in the shortcode
  4. Geolocation options

This option is activated on websites with SSL only. It can access your geolocation data through your browser cookies and display the nearest events in your end-users proximity. Users may further zoom out of the map to see events on other coordinates as well. 

  1. This option is different from the one available in the modules settings, but it has the same functionality for the shortcodes. The option in the modules only applies to the single event page, not the shortcodes.
  2. With the View Mode option, another style called Side has now been added to the shortcodes view.
  3. The center option selects a fixed point of your choice from the map as the center and directs the user to your event’s location from that center point.

Another section of the shortcode settings for the map is the filter section below. This option adds search functionality to your map by filtering events by State, City, Region, Street, and Postal Code.

filter section - Advanced Map Addon

To be able to display the filter’s geolocation options on your map, you need to go back to your event location in the location menu and define this data for each event. Then, if you navigate to the list of your event locations from the MEC menu on WordPress, you’ll find that the above values have been accordingly added to the locations.

advanced map settings - Advanced Map Addon
filter section 2 - Advanced Map Addon

Kindly take note that if you wish to display all available fields in the Search Filters list for MEC, you must have already used that location in the events menu.

Also, take note that these location fields appear when you create or submit an event. These are, of course, optional and do not fill automatically. This way you are free to add just enough information.

You can search for any addresses on your map using geocoding features of Google Maps anywhere you place the MAP shortcode into. This feature also gives you address suggestions to help facilitate finding event locations. 

The next and previous buttons on the map also help you find the nearest next or previous event according to the geographic coordinate. The additional location is also displayed on the maps in Single Event. All you need to do is to enter the second location.

Map - Advanced Map Addon

Feel free to watch this video for a visual demonstration of this addon:

Q&A About Advanced Map Add-On

01. How can I display events that are closest to the user?

This can be achieved by enabling the Geo Location option. Afterward, events that are closest to the user are displayed to them.

02. I have enabled the Geo Location option but it’s still not working. What can I do?

There two important things that you need to consider when enabling this option.

1- This option only works if SSL is active

2- The end user must allow their browser to access their location data so that your website recognizes their location to allow the option to work as intended.

Make sure that the user feels at ease in sharing their location with you by stressing the fact that you are complying by GDPR rules before asking permission to access their location.

03. I noticed in your video demonstration that if you’ve entered the wrong address, Google will suggest the correct one. How can I do this?

This option will only become available to you once you’ve enabled your Google API correctly on your domain. To learn more about how to get your own API code, please follow this document:

https://webnus.net/dox/modern-events-calendar/google-maps-options/

04. Does this addon also work with MEC Lite?

You need the Pro version in order to use this addon since the ability to show maps is a PRO feature. Follow the link below to purchase MEC Pro:

https://webnus.net/mec-purchase/

Report Out Dated Content

If you think the content of this page does not reflect updated information, please let us know.

Report Now

Avatar for Doris Cooper
Avatar for Doris Cooper
2 Comments
Avatar for Doris Cooper
proudsword November 13, 2020
| |

Features needed please :- Filter by state, city etc : when one city appears many time, donr’t propose many time this city in filter but just one time and when you select it, show all the events in this city- Ability to filter by custom fields