Introduction:
In this article you will learn how to add the Unlimited Google Maps widget to your Elementor website.
Google Maps API Key #
Before starting, you will need to confirm that you have a Google Map API key and that you have configured it in the general settings of the Unlimited Elements plugin. If you do not know how to create an API key you can click on the button below for the step by step explination.
Install the Google Maps widget and add it to a page #
Search for Google Maps in the widget library and hover over the widget. Click install to install and activate the widget. Now you can add it to any Elementor page and access it from the widgets pane.
Set you map location #
You can choose to set your map location by “Address” or “Coordinates”. The location does not add any markers to the map but only sets the position of the general map.
Marker Clusters #
Turn on the marker cluster setting to group markers that are close together on the map. You can apply max zoom setting and grid size to determine the sensitivity of how close markers should be to become a cluster.
Add markers to the map #
To add markers to the map go the places section in the widget settings. Each place is an item that had a Latitude and Longitude. If you do not know the Latitude and Longitude of your places you can use our built in coordinates finder tool.
Add Categories #
To group your places by categories you can set an item type to category. This will group all the items that are set to place under that category. A category can optionally have latitude and longitude values if you when clicking on it you want to change the location of the map.
After adding categories and places to your map you can configure the settings accordingly to your prefrences.
Customize Map Controls #
You can control every single part in the maps.
- Zoom Controols
- Map Type
- Street View Controls
- Fullscreen Controls
- Rotate Controls
- Scale Controls
- Current Location Button
- Map Reset Button
Map Navigation #
Choose where you want to place the the navigation of your map (Before, After, Hide). The navigation bar can contain a search bar that filters the places by name with a live search. The items can contain an image as well which can be set as a regular thumbnail or as the background of the whole item.
Map Info Window #
When clicking on an item in the navigation an info window will open. If you want the first items info window to be open by default you can toggle the setting.
Map Markers #
The map markers are customizable and you can set them under the “Default Marker” section in the settings.
You can also override an item marker to make it have a custom image or diffrent marker from the list.
Map Styling #
In the style tab you can find all the diffrent options to style you map. One of the unique features is adding a custom style generated by the snazzy maps website.