Map
A simple wrapper for Google Maps
Usage
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="//maps.google.com/maps/api/js?v=3"></script>
Example
Markup
<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.
Example
Markup
<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 | ||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||
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 | |||||||||||||||||||||||||||||||||||||||||||||||||
|
Init element manually
let objMap = FatKit.map(mapelement, { /* options */ });
Events
Name | Parameter | Description |
---|---|---|
complete.f.map |
map | On item toggle |