Files

• _google-map.scss
• google-map.js
• README.md

Github Page (customers only): https://github.com/esr360/Kayzen/tree/master/assets/modules/objects/google-map

Module Overview

Examples

<!-- Google Map -->
<div class="google-map" id="google-map"></div>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

Then in your theme's JS file (e.g. assets/themes/Kayzen/kayzen.js), call the googleMap() function on your Google Map container:

$('#google-map').googleMap();

Custom Location

Whilst the default longitude/latitude can be controlled in the module's Sass configuration, it is primerily controlled by the JavaScript. Pass your custom longitude/latitude values to the googleMap function:

$('#google-map').googleMap({
    longitude: 48.195387,
    latitude: -63.171387
});

Custom Zoom (with custom longitude/latitude)

$('#google-map').googleMap({
    longitude: 48.195387,
    latitude: -63.171387,
    zoom: 12
});

Custom Colors

Whilst the map colors can be controlled in the module's Sass configuration, they are primerily controlled by the JavaScript. By default, the Sass colors get passed to the Google Map's JavaScript, but this can be overwritten via the styles option when calling the plugin (below example taken from Snazzy Maps):

$('#google-map').googleMap({
    styles: [  
        {  
            "featureType":"landscape.man_made",
            "elementType":"geometry",
            "stylers":[  
                {  
                    "color":"#f7f1df"
                }
            ]
        },
        {  
            "featureType":"landscape.natural",
            "elementType":"geometry",
            "stylers":[  
                {  
                    "color":"#d0e3b4"
                }
            ]
        },
        {  
            "featureType":"landscape.natural.terrain",
            "elementType":"geometry",
            "stylers":[  
                {  
                    "visibility":"off"
                }
            ]
        },
        {  
            "featureType":"poi",
            "elementType":"labels",
            "stylers":[  
                {  
                    "visibility":"off"
                }
            ]
        },
        {  
            "featureType":"poi.business",
            "elementType":"all",
            "stylers":[  
                {  
                    "visibility":"off"
                }
            ]
        },
        {  
            "featureType":"poi.medical",
            "elementType":"geometry",
            "stylers":[  
                {  
                    "color":"#fbd3da"
                }
            ]
        },
        {  
            "featureType":"poi.park",
            "elementType":"geometry",
            "stylers":[  
                {  
                    "color":"#bde6ab"
                }
            ]
        },
        {  
            "featureType":"road",
            "elementType":"geometry.stroke",
            "stylers":[  
                {  
                    "visibility":"off"
                }
            ]
        },
        {  
            "featureType":"road",
            "elementType":"labels",
            "stylers":[  
                {  
                    "visibility":"off"
                }
            ]
        },
        {  
            "featureType":"road.highway",
            "elementType":"geometry.fill",
            "stylers":[  
                {  
                    "color":"#ffe15f"
                }
            ]
        },
        {  
            "featureType":"road.highway",
            "elementType":"geometry.stroke",
            "stylers":[  
                {  
                    "color":"#efd151"
                }
            ]
        },
        {  
            "featureType":"road.arterial",
            "elementType":"geometry.fill",
            "stylers":[  
                {  
                    "color":"#ffffff"
                }
            ]
        },
        {  
            "featureType":"road.local",
            "elementType":"geometry.fill",
            "stylers":[  
                {  
                    "color":"black"
                }
            ]
        },
        {  
            "featureType":"transit.station.airport",
            "elementType":"geometry.fill",
            "stylers":[  
                {  
                    "color":"#cfb2db"
                }
            ]
        },
        {  
            "featureType":"water",
            "elementType":"geometry",
            "stylers":[  
                {  
                    "color":"#a2daf2"
                }
            ]
        }
    ]
});

Customizing

The Google Map can be customized using the following options:

Read the Configuration page to learn more about a module's configuration.

Property Name	Default Value	Description
$baseMapColor	color('brand', 'primary');	This is the base color that the default palette creates its colors from.

Property Name	Default Value	Description
output-JSON	true	This allows the config to be accessed in the JavaScript.
colors	[...]	Each default color is a Sass-adjusted $baseMapColor color, but you can overwrite any as desired.
location	(53.48076, -2.24263)	The default longitude/latitude for Google Maps.

To change one of the above values, pass your new value(s) to the google-map() mixin in your theme file (e.g. assets/themes/Kayzen/_kayzen.scss).

@include google-map((
    location: (48.195387, -63.171387)
));