Map Widget

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.

Controls and Style

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

Additional Fields

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

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.

Get Widgetkit for WordPress or Joomla.

Buy Widgetkit