Advanced Map Addon

Elevate your website’s map functionality with the Advanced Map Addon, empowering you to create professional shortcodes for map views in two stylish options, including OpenStreetMap as an alternative to Google Maps. Unlock new features such as Street and Region filters, enhancing precision in event filtering. This addon seamlessly integrates filters and events next to the map, providing a fresh and detailed user experience that goes beyond the basics. Upgrade today to showcase your events with clarity and sophistication, offering users an enriched and engaging interaction.

Advanced Map Addon Preparation

Installation

In the first step, Ensure that both MEC (Modern Events Calendar) and the Advanced Map Addon are installed and activated.

Activating Map

Please head over to MEC Settings > Event Module and make sure to enable the Map feature.

Advanced Map Addon Settings

After installing the Advanced Map Addon, you will see a new menu in MEC’s settings. In the pictorial guide below, you can see the explanations under each section.

1- Show Map on Event Page

This option displays the Map on the single event page.

2- Getting the API Key

To proceed, please ensure that you have obtained an API key from Google. You will need to enter this key in the designated field.

You need to enable “Maps JavaScript API” from the API Library

You can enable more APIs from the Google API Library, e.g., Place API, Direction API, Geocoding API, Google Calendar, etc. (All in One API)

If you want to use OpenStreetMap, please select the OpenStreetMap option from the Default Map dropdown.

To use GPS coordinates (latitude and longitude), you must first 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, on the new page, click on GET A KEY for your API. Also, to add GPS coordinates, please go to  latlong.net. 

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

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

3- Zoom level

To adjust the zoom level for the Google Maps module on the single event page, you can use the relevant option. If you’re using the Google Maps skin, the zoom level will be calculated automatically based on the event boundaries. The zoom value can range from 5 to 21.

4- Google Maps Style

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

5- Direction on a single event

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

• Simple Method
• Advanced Method

6- Lightbox Date Format

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

7- Google Maps API Load

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).

8- Fullscreen Button

You can enable this option if you want to have a fullscreen button on your map.

9- Default map

You can choose Google or OpenStreetMap as a default map.

10- Scroll Wheel 

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

Creating Shortcode with the MAP View Skin

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

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

1. Skin options (Map View Skin)
2. Calendar Start Date options 
3. Display maximum event 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-user proximity. Users may further zoom out of the map to see events on other coordinates as well. 

5. 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.
6. With the View Mode option, another style called Side has now been added to the shortcodes view.
7. 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.

To display the filter’s geolocation options on your map, you must 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 added to the locations accordingly.

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, 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 address on your map using the geocoding features of Google Maps anywhere you place the MAP shortcode. 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.

Feel free to watch this video for a visual demonstration of the Advanced Map Addon:

Q&A About Advanced Map Addon

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 are 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 with 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. Please follow this document to learn how to get your own API Key.

04. Does the Advanced Map Addon also work with MEC Lite?

You need the Pro version to use the Advanced Map Addon since the ability to show maps is a PRO feature. Follow this link to purchase MEC Pro.