e-addons

Share

ic ACF bwe-MAP

Map Locator

A system to generate complex maps based on “Google Maps” Static, Dynamic even from Query Posts, that exploits Custom-fields (ACF, Pods, metaboox, Jet etc) with geolocation data.

Advanced map with Multi-locations, Snazzy Style, Custom markers, Advanced InfoWindow, Locations list, current user position

Google Maps API

This Widget REQUIRE the Google Maps API key, so first of all obtain it for free from Google
and insert it in Elementor > Settings > Integration page.

elementor settings google maps api integration

Data Type

Generate your maps based on static or dynamic values from CPT queries or custom address fields with latitude and longitude.

customfield map

Custom Field

dynamic single & multiple

mapsLocator dataType custom field
address

Address

static 1 point

mapsLocator dataType address
latlng

Latitude longitude

static 1 point

mapsLocator dataType latlng
static list

Repeater

static multiple points

mapsLocator dataType listRepeater

Custom Field

single map

Dynamic Single

Source type

You will be able to generate the map and the marker by taking the value from custom field recorded on:

Post
mapsLocator source post
Term
mapsLocator source term
User
mapsLocator source user
Attachment
mapsLocator source attachment
multiple map

Dynamic Multiple locations

Query type

4 different ways to build multi-location based maps

CPT
mapsLocator query CPT
Custom Field Relations (Array)
mapsLocator query CustomFieldsArrray
ACF repeater
mapsLocator query ACFrepeater
Specific Posts
mapsLocator query SpecificPosts

Options

Map Height:
the Height of the map

Marker interactivity:

  • Open info window
  • Go to link (also from custom field)
  • None

Location list:
Directory of positions as LIST to reach the locations in “StoreLocator” mode, very immediate and usable.

mapsLocator options

InfoWindow

Simple Mode

Write in the area the text description of the location.

mapsLocator infoWindow simple
Shortcode & Twig CODE
mapsLocator infoWindow shorcodetwig

Create the template via TWIG or SHORTCODE to dynamically provide the information contained in the post.

InfoWindow
PANEL STYLE

The graphic style dedicated to the InfoWindow panel.

Configure the aesthetic characteristics:

  • Width
  • Padding
  • Borders & Radius
  • Alignmets
  • Colors
mapsLocator infoWindow stylepanel

In case of Query on posts, the characteristics of the infoWindow can be easily configured one by one:

Image
mapsLocator infoWindow query image
Title
mapsLocator infoWindow query title
Content
mapsLocator infoWindow query description
Read more
mapsLocator infoWindow query readmore
mapsLocator style
mapsLocator style json
mapsLocator style snazzy

Style

The map is configurable.

  • Road map
  • Satellite
  • Hybrid
  • Terrain

Snazzy is a useful service for providing a Json data object to the map and creating a custom graph style. By copying the code (in Json format) you can get the result on your map.
For more information see: https://snazzymaps.com

Presets
A selection of styles that you can use effortlessly.

Marker

Several predefined markers to indicate positions.

Default
The classic pin / basic marker provided by GoogleMap that points to the indicated position.

Show Labels
Alphabetical labels that identify the position.

Bounce animation
The markers entry animation.

mapsLocator marker default

Marker SHAPES

You can use some styles of svg based markers.

In addition to the shape, you can configure some graphic parameters to customize the style.

  • Circle
  • Color
  • Stroke
  • Size
mapsLocator marker shape

Marker CUSTOM IMAGE

To use custom media image as a marker.

Custom Field Image Marker from:

  • Pots
  • Terms
  • Users
  • Attachments

Taking the data from custom meta you could have a different design for each point in the map.

Marker Image
The custom image

Define the size if needed

 

mapsLocator marker image
mapsLocator locationsList

Locations List

Manage the map through the list of locations

By clicking on the position from the list, the map will position itself in the predetermined point.

Styles:

  • Side BG color
  • Items Bg color
  • Borders

Configure:

  • Image
  • Title
  • Address

Controls

The controls provided by GoogleMap allow you to manage the mouse/touch interactivity and the visual tools in the ui.

Interactivity

  • Mouse scroll (zoom)
  • Pan Control (zoom)
  • Rotate Touch
  • Scale Touch

UI Tools

  • Map Type
  • Street view mode
  • (+) (-) Zoom
  • Full Screen mode

Marker Cluster
The Cluster allows you to group the positions when too close and greatly improves the usability of the map.

mapsLocator controls
mapsLocator myLocation

My Location

If supported by the browser and activated on settings, you can define a custom marker on the position of the user who is viewing the page containing the map.

Trigger:

  • Button click
  • On Load

Zoom Level

Marker Style:

  • Color
  • Dimension

DEMO

Map example

ic ACF bw
ALL

e-MAP