Google Maps

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

Code Example

<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

  • Add API Key

    Open the js/functions.js File and add your API Key by finding the following code:

    googleMapsAPI = ‘YOUR-API-KEY’,

    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.

  • Use this HTML Code
    <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>

Settings

Setting Description
data-latitude

Latitude for your Map Location

Note:This will be ignored if you add a Value for data-address
data-longitude

Longitude for your Map Location

Note:This will be ignored if you add a Value for data-address
data-address

Address of your Map Location

Ex: data-address="Melbourne, Australia"

data-content

Content of the Marker Popup of the Default Address

Note:Make sure that you escape Double Quotes and use Single Quotes where necessary
data-zoom

Set the Default Zoom for your Map

Option(s): 1-14

Ex: data-zoom="12"

data-maptype

Set the Default MapType for your Map

Option(s): TERRAIN, ROADMAP, SATELLITE, HYBRID

Ex: data-maptype="TERRAIN"

data-scrollwheel

Enable/Disable Scrollwheel Zoom In/Out for your Map

Option(s): true, false

Ex: data-scrollwheel="true"

data-styles

Set 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).

Ex: data-styles='[{"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"}]}]'

Note:Make sure that you escape Double Quotes and use Single Quotes where necessary
data-control-pan

Enable/Disable Pan Control for your Map

Option(s): true, false

data-control-zoom

Enable/Disable Zoom Control for your Map

Option(s): true, false

data-control-maptype

Enable/Disable MapType Control for your Map

Option(s): true, false

data-control-scale

Enable/Disable Scale Control for your Map

Option(s): true, false

data-control-streetview

Enable/Disable StreetView Control for your Map

Option(s): true, false

data-control-overview

Enable/Disable Overview Control for your Map

Option(s): true, false

data-markers

Add Markers to your Map

Ex: data-markers='[{address: "Melbourne, Australia",html: "Melbourne, Australia"},{address: "Sydney, Australia",html: "Sydney, Australia"}]'

Markers with Different Icons

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]}}]'

Last Modified: September 17, 2020