Google maps

The Maps JavaScript API lets you customize maps with your own content and imagery for display on web pages and mobile devices.

Official Documentation

Usage

JS

In order to use this plugin on your page you will need to include the following script in the “Page JS” area from the page’s footer:

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC1oALsXLX-XEh2iYbE8tOjxsdFNHE39WM"></script>

Get your API key

In order to get your Google Maps API key navigate to the following page: Google Maps

Initialization

Simply copy one of the code examples demonstrated below and include it in your page. Afterwards, you can modify the lat and long in the data-lat and data-lng attributes from the

Examples

Default

<div id="map-default" class="map-canvas" data-lat="25.7617" data-lng="-80.1918" style="height: 600px;"></div>

Custom

in order to change the map’s primary color simply modify the data-color attribute’s value with the hex code you want

<div id="map-custom" class="map-canvas" data-lat="25.7617" data-lng="-80.1918" data-color="#510FA8" style="height: 600px;"></div>
Summary