Canvas Docs

Google Maps

You can Embed Google Maps on any Page using our easy-to-setup codes connecting with the Google Maps API.

Usage

<div class="gmap" style="height: 250px;" data-address="Melbourne, Australia" data-zoom="12" data-markers='[{address: "Melbourne, Australia",html: "Melbourne, Australia"}]' data-icon='{image: "one-page/images/icons/map-icon-red.png",iconsize: [32, 32],iconanchor: [14,44]}'></div>

How to Use

  1. 1

    Add API Key

    Add your API Key in the js/functions.js File. Find:

    gmapAPI: '',

    and Add your API Key within the Single Quotes (Do not delete the Quotes). You can generate your API Key for Google Maps by Clicking Here. Make sure that you have already Restricted for your API Key including an HTTP Referrer and API Restrictions to avoid any unauthorized use.

  2. 2

    Use this HTML Code

Settings

SettingDescription
data-latitudeLatitude for your Map Location
This will be ignored if you add a Value for data-address
data-longitudeLongitude for your Map Location
This will be ignored if you add a Value for data-address
data-addressAddress of your Map Location
Example: Melbourne, Australia
data-contentContent of the Marker Popup of the Default Address
Make sure that you escape Double Quotes and use Single Quotes where necessary
data-zoomSet the Default Zoom for your Map
Example: 12
data-maptypeSet the Default MapType for your Map
Example: TERRAIN
data-scrollwheelEnable/Disable Scrollwheel Zoom In/Out for your Map
Example: true
data-stylesSet a Custom Style for your Map. You can create your own Style or Choose from the Snazzy Maps Library. Make sure that you Trim and Minify the Styles Codes before using to avoid line-break issues (Use this tool and remove Space, Tabs and Lines).
Example: [{"featureType":"all","elementType":"all","stylers":[{"saturation":"32"},{"lightness":"-3"},{"visibility":"on"},{"weight":"1.18"}]},{"featureType":"administrative","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"landscape.man_made","elementType":"all","stylers":[{"saturation":"-70"},{"lightness":"14"}]},{"featureType":"poi","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"saturation":"100"},{"lightness":"-14"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"off"},{"lightness":"12"}]}]
Make sure that you escape Double Quotes and use Single Quotes where necessary
data-control-panEnable/Disable Pan Control for your Map
data-control-zoomEnable/Disable Zoom Control for your Map
data-control-maptypeEnable/Disable MapType Control for your Map
data-control-scaleEnable/Disable Scale Control for your Map
data-control-streetviewEnable/Disable StreetView Control for your Map
data-control-overviewEnable/Disable Overview Control for your Map
data-markersAdd Markers to your Map
Example: data-markers='[{address: "Melbourne, Australia",html: "Melbourne, Australia"},{address: "Sydney, Australia",html: "Sydney, Australia"}]'

Screenshots

Google MapsGoogle MapsGoogle MapsGoogle MapsGoogle MapsGoogle MapsGoogle Maps

Extras

Add Markers to your Google Map with a Different Icon for each marker.

data-markers='[{address: "Melbourne, Australia",html: "Melbourne, Australia",icon: {image: "one-page/images/icons/map-icon-red.png",iconsize: [32, 32],iconanchor: [14,44]}},{address: "Sydney, Australia",html: "Sydney, Australia",icon: {image: "demos/burger/images/svg/hamburger-marker.svg",iconsize: [40, 36],iconanchor: [40,36]}}]'