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.
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
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
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.
- Skin options (i.e. Map View Skin)
- Calendar Start Date options
- Display maximum events options in the shortcode
- 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.
- 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.
- With the View Mode option, another style called Side has now been added to the shortcodes view.
- 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:
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:
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: