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.

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:

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.

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

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.

4. Direction on a single event

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

• Simple Method
• Advanced Method

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.

8. Default map

You can choose google or OpenStreetMap as a default map.

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.

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. 

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

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.

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