A simple wrapper for Google Maps


To apply a map to an element add the data-f-map attribute to the map element. Remember that this element must have a set width and height.

Note You can add the Google Maps JavaScript before your other script files otherwise the component will load it automatically in which case make sure you add your API Key in the map options!

<script src="//"></script>



<div class="f-map" data-f-map="{lat:53.46372,lng:-2.472892,zoom:17,marker:{title:'Fat Media'}}"></div>

Multiple Markers

You can pass through an array of markers to the map to display them all and have the map resize to fit them in.



<div class="f-map" data-f-map="{lat: 54.0631,lng: -2.88284,zoom: 14,map_options: {scrollwheel: false},markers: [{title: 'Home',lat: 54.0631,lng: -2.88284},{title: 'Another place',lat: 53.0631,lng: -2.48284,infowindow: {title: 'One Window',content: '<p>To rule them all</p>'}},{title: 'Yet another place',lat: 54.0631,lng: -2.38284,	infowindow: {title: 'An Infowindow',content: '<p>Some content for the infowindow!</p>'}}]}"></div>

JavaScript options

Option Possible value Default Description
api_key string '' The Google Map API key
map_type road, satellite, terrain, hybrid road Type of map to show
lat float 0 The latitude of center of the map
lng float 0 The longitude of center of the map
zoom integer 12 The default zoom level
marker object false If set will be the options for the default marker
Option Possible value Default Description
title string "" The title of the marker
infowindow object {} An infowindow object containing:
Option Possible value Default Description
title string "" The HTML for the title for the infowindow (put in a div with class .f-map-infowindow-title)
content string "" The HTML for the content for the infowindow (put in a div with class .f-map-infowindow-content)
animation boolean true Will add the drop animation to markers
markers array [] If more than 1 marker is required populate this with multiple marker objects
map_options object The default options for the map
Option Possible value Default Description
draggable boolean true Can the map be dragged around?
mapTypeControl boolean true Enables/disables the map type controls.
navigationControl boolean true Enables/disables the navigation controls.
overviewMapControl boolean true Enables/disables the Overview Map control.
panControl boolean true Enables/disables the Pan control.
rotateControl boolean true Enables/disables the appearance of a Rotate control for controlling the orientation of 45° imagery.
scaleControl boolean true Enables/disables the Scale control that provides a simple map scale.
scrollwheel boolean true whether to allow the scrollwheel to zoom the map.
streetViewControl boolean true Enables/disables the street view control
zoomControl boolean true Enables/disables the zoom control
styles array not set Apply styles (for example from Snazzy Maps)

Init element manually

var objMap =, { /* options */ });


Name Parameter Description map On item toggle