Use Widgetkit to display a Google Map with one or multiple locations on your site. Content will appear inside a pop-up when clicking on each location marker.
You have total control when it comes to styling your map. You can invert the map, apply a different color, hue and lightness and decide which controls you want to display or hide.
Small Controls
Street View and Map Type
Hue and Street View
Inverted Lightness and No Controls
Some of the elements that you can display inside a Map widget need to be defined first by creating an additional field inside the Content Manager.
| Field |
Description |
| Location |
Will be represented by the marker inside the map. Content of the other fields will be displayed in the popup. |
| Social Links |
Available social fields are Email, Facebook, Google Plus and Twitter. |
| Map Options |
Settings |
Description |
| Map Size |
[Number] |
Set the width and height of the map in pixels. |
| Map Type |
Roadmap, Satellite |
Select the map type. |
| Controls Default UI |
|
Enable or disable the default Google Maps UI. |
| Controls Type Controls |
|
Show or hide the Type Controls. |
| Controls Map Controls |
|
Show/Hide the Map Controls on Map. |
| Controls Directions Controls |
|
Show or hide Directions Controls. |
| Controls Zoom Level |
0 – 19 |
Set the initial zoom level of the map. |
| Controls Marker |
Hide, Show, Show and enable Popup, Show with opened Popup |
Define the display settings of the popup that belong to the location marker. |
| Controls Marker Popup max width (px) |
[Number] |
Set the width and height of the popup in pixels. |
| Map Cluster Markers |
|
Group markers on zoom out. |
| Map Scroll Wheel |
|
Enable zooming in and out of the map on scroll. |
| Map Draggable |
|
Enable moving the map via dragging. |
| Style Options |
Settings |
Description |
| Style Lightness |
|
Invert the appearance of the map. |
| Style Hue |
Hex-Value |
Apply a different color to the Map. |
| Style Saturation |
Number (-100 to 100) |
Modify the saturation. |
| Style Lightness |
Number (-100 to 100) |
Lighten or darken the Map. |
| Style Gamma |
Number (0 to 10) |
Define the Map’s gamma factor. |
| Media Options |
Settings |
Description |
| Media Display |
|
Display the image of all items. |
| Media Image |
Width, Height |
Set the width and height of the image in pixels. |
| Media Align |
Above Title, Below Title, Left, Right |
Define the image alignment. |
| Media Border |
None, Circle, Rounded |
The appearance of the images inside the Popup. |
| Overlay |
None, Link, Icon, Image, Social Buttons |
Define what will be displayed inside the overlay or hide the overlay. |
| Overlay Animation |
Fade, Slide Top, Slide Bottom, Slide Left, Slide Right |
The animation that will be applied to the overlay when being displayed on hover. |
| Overlay Image Animation |
None, Fade, Scale, Spin, Grayscale |
The animation that will be applied to the image on hover. |
| Content Options |
Settings |
Description |
| Text Display |
|
Show or hide title, content and social buttons. |
| Text Title Size |
H1, H2, H3, H4, Extra Large |
Define the font size of the title. |
| Text Alignment |
Left, Right, Center |
Define the text alignment. |
| Link Display |
|
Display the Read More link. The link URL is added to each item in the Content Manager. |
| Link Style |
Text, Button, Button Primary, Button Large, Button Large Primary |
Set the style of the Read More link. |
| Link Text |
[Text] |
Define the link text. |
| General Options |
Settings |
Description |
| Custom HTML Class |
[Text] |
Set a custom HTML class that will be added to the widget element in the rendered output. |