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.
Generate your maps based on static or dynamic values from CPT queries or custom address fields with latitude and longitude.
You will be able to generate the map and the marker by taking the value from custom field recorded on:
Dynamic Multiple locations
4 different ways to build multi-location based maps
Custom Field Relations (Array)
the Height of the map
- Open info window
- Go to link (also from custom field)
Directory of positions as LIST to reach the locations in “StoreLocator” mode, very immediate and usable.
Write in the area the text description of the location.
Shortcode & Twig CODE
Create the template via TWIG or SHORTCODE to dynamically provide the information contained in the post.
The graphic style dedicated to the InfoWindow panel.
Configure the aesthetic characteristics:
- Borders & Radius
In case of Query on posts, the characteristics of the infoWindow can be easily configured one by one:
The map is configurable.
- Road map
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
A selection of styles that you can use effortlessly.
Several predefined markers to indicate positions.
The classic pin / basic marker provided by GoogleMap that points to the indicated position.
Alphabetical labels that identify the position.
The markers entry animation.
You can use some styles of svg based markers.
In addition to the shape, you can configure some graphic parameters to customize the style.
Marker CUSTOM IMAGE
To use custom media image as a marker.
Custom Field Image Marker from:
Taking the data from custom meta you could have a different design for each point in the map.
The custom image
Define the size if needed
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.
- Side BG color
- Items Bg color
The controls provided by GoogleMap allow you to manage the mouse/touch interactivity and the visual tools in the ui.
- Mouse scroll (zoom)
- Pan Control (zoom)
- Rotate Touch
- Scale Touch
- Map Type
- Street view mode
- (+) (-) Zoom
- Full Screen mode
The Cluster allows you to group the positions when too close and greatly improves the usability of the map.
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.
- Button click
- On Load