Google Maps

Usage

Google Maps can be easily initialized with basic HTML markup attribution.

Parameters

Data Attributes	Description	Required
data-init="gmap"	widget initializer
data-lat	The latitude of the location.
data-lng	The longitude of the location.
data-icon	The URL or Base64 encoded marker icon/image.
data-info	The text to be displayed within the Info Window of the marker. If not specified, `innerHTML` of the element will be used by default.
data-width	The width of the map i.e. data-width="600px". If not set, defaults to the width of the container element.
data-height	The height of the map i.e. data-height="300px". If not set, defaults to the width of the map.
data-options-var	A reference to a global JS variable that may hold array of markers as well as additional map-related settings (i.e. data-options-var="myCustomVariable").

Example 1: Basic Map with a Single Marker

A basic map with a single marker can be initialized as follows:

<div data-init="gmap" data-lat="33.627062" data-lng="-111.959466" data-height="300px">
    <strong>Rancho Solano Preparatory School</strong>
</div>

Extended Options via a Custom JS Variable

If you need to plot multiple markers on the map with customized icons and info windows, or apply custom map styles, doing so via data attributes would be too cumbersome. Therefore its easier to point Map constructor to a custom JS variable that contains all the necessary options. Simply define your custom JS variable anywhere in your HTML code and reference its name via data-options-var="myCustomVariable" and gMap module will parse it automatically.

Parameters	Description	Required
markers	An array of marker objects.
width	The width of the map. If not set, defaults to the width of the container element.
height	The height of the map. If not set, defaults to the width of the container element which makes the map square.
icon	The URL or Base64 encoded image that is displayed as marker on the map.
styles	The array of style objects which applies custom styles to the map.

Marker Object

Parameters	Description	Required
lat	The latitude.
lng	The longitude
info	The content that appears in the Info Window of the marker.
icon	The URL or Base64 encoded image that displayed as marker on the map.

Example 2: Advanced Multi-Marker Map

<div data-init="gmap" data-options-var="advancedMultiMarkerMap"></div>

<script>
var advancedMultiMarkerMap = {
    height: '500px',
    markers: [
        {
            lat: 33.627062,
            lng: -111.959466,
            info: '<h4>Rancho Solano Preparatory School</h4><address>5656 E Greenway Rd, Scottsdale, AZ 85254</address>',
            icon: 'data:image/webp;base64,UklGRi4CAABXRUJQVlA4TCICAAAvHwAJEJfCOJKkNosn/8gUhn166Q4PMTiOJElqqocbvMMfvNZPE1NsA6BtA079/7R8UbeegFHQtg3j7vBHNVwjm7QZk7SPAIjmSQlU0Xh9BSrWYuKbzzsfRlgj7feHNahl793yn72+cMP7e809u+ay9+qZxzEH0lgLVKwREg1CokEICkRIhGJFNGIHBmIiGv4ZiZAYklXYq6doiJWkhJAIoUBSoEBI/P4LUAADUJUGu/Y3fdMZINi2tSyhwxZs6Y5nS3d3ffMfDYvv/d+vE7gvov+M3LaNJDvprLc4j3Cg1e72+kZCt91yANLpj6fzhYEwHfc7rWMNZqvd3kiymg06rXZ/tlfG2s+k3R2v1NtXzUhfb1iNu73pTn0160bCl9pNe/35XtXqVSPVa9jP+7Kwx+LPyWZyWTt8EK4uCZ+GVMqEkBNAmFCsWFMhpIJOTcEUocJTIST9Tla+JKHCUKCozwnAc5uISyLkdQJwRyjPtBsn4IsREpEXeY0TSudO4Jppebpwgh5c+jMJkxNPVGBa8ZGSxD+mOPDNfVK+o4oV1V/+Nwqkvi0RC5zPn5QGI7Hih5z3RXtzEXWefdrihzIo/9vc2Z9r+7mwnysul+8NRsLlUs/1AZxFHaDnWt8Ly/VWt6jteqnvBW2vDEaTxebUojaLyWhwulcYSXc0Xx8NUev5qMv8a+HjpWCjl4kXWwVZnJShh9OFTGFcgHT6Q0iHLwA=',  
        },
        {
            lat: 33.628732,
            lng: -111.893314,
            info: '<h4>Four Peaks Grill & Tap</h4><address>15745 N Hayden Rd, Scottsdale, AZ 85260</address>',
            icon: 'data:image/webp;base64,UklGRhwCAABXRUJQVlA4TA8CAAAvHwAJECfCOJKsVPuQZMj/TjxfTu6LEwPbSJKc7CGSIX+DQAhDWhpm2EaS1GhRyRArUWLjyhc7BtK2yfbfv+STTdqMSdpHEAnyBBTr+fBTB0FsOa4rxfM8goAI4sf+/xcEsSDu9zfs0/EYte/7fFU8vwR/QfwgiA/5/x8xYvK/HiQIYkEEMc+DGyrbF1KBVCAVHGM7REW0iFqos6t+iGqAINt22iY/WGbG8FeYmWH/i4olWZ3pAt6L6D8jt20jMc7sc2v6iATanV5/EFT9HtoJgN3BZLZYBtQCk0G3ferhfL0/BNV+PR922RnMDya4MB90epO1yddaQVXLG0x6/dne2K1EbMx+1h8sDqZlEw8AIGkOiwGXYSTZ0sgyUA2ip3jpDwoqSlh+n0RbyVbFSx7OH+RBbNWztKKVpp91cCD9WCGIGLT8oACoaKmgP4hRtsjV/fXFvfCGl9L0y2VzIPRLbl9fIA+4ky+NQQs+5PkVcupPbQZp6HvqAfIg39poBWk19E0AvGmDgVjXoqCodQZjQwXa4B8wwn8MiABxMgIAGSUpVtG1iOTVLtpr2ruufXNBMmgu/j5XvrnM+77N++bSnesjfcmbI925dveF1WbnJm92WLn7grOvDMfT5dZO3myX0zHcfcUp9saLTZS8wWLc8/wbk9MlzdbpoCx3hrul1YEZzZbEKLgBdgcjsOtvAAA=',  
        },
        {
            lat: 33.623334,
            lng: -111.901007,
            info: '<h4>Costco Wholesale</h4><address>15255 N Hayden Rd, Scottsdale, AZ 85260</address>',
            icon: 'data:image/webp;base64,UklGRhQCAABXRUJQVlA4TAcCAAAvHwAJEK/CoJEkRbPH/oW8lNdzOMengUEjSYp29vkVvH9Bb4VpWUHbRk7vfvCn8yQez24MpG2T7b9/yVebtgGDJ6c8ApJefE80+Zo8vUCzdCwooX29BArCmnxwFLnoxvcrclV5ehjN6vf0AhIMWC9ibPW7ynOV+1Cb9MIbpnUAKb1g5kZ1STVJ9UXQThAUJ0FQnBQnQVCcBOFfp28ZB1JBWpC67bE7fiAVEGxtOxvlG9s2an5jxjba7n8vmXx/vp4zC4joPwO3bRvJdm/vSx4hSapmmBZLpqGpUhnd8oIoZigKPEtXy9hhOpmyNElDW1c1K5wqbE1DSzO8VGl8yix9NpTUM8xgovzlY4w47tRZmQSmFU0VudTPxeLi5kfdrDKNLCuu0MaXk9Mr7PzWERMecQcAYHvU54L7gAAAa8gGsAL8F257t716DkQM8WxjWMs1CLjHZVga1AIiukcAV8M5+L7fWrnEdzYfiK+IT8/Y54JXALAOsIp3XIDouDkve20uC1DVOXs4pHfwxuSB3MIpyiyWUMYbgDXYxVtCVIFqKH8hIo6xRf5rWhdU9XUxf12J6rIh2rchqkta17OZyA1lNqN1TftCkhXUDaXIEtoXSF+xXT/Oq24oeey7NukrVKrhRtmfG0oWuYbg2BqXs+U8DcdxoShFXAnTThDHgVMJ07rlOJYujgQA',  
        }
      ],
    styles: [
        {elementType: 'geometry', stylers: [{color: '#242f3e'}]},
        {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
        {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
        {
          featureType: 'administrative.locality',
          elementType: 'labels.text.fill',
          stylers: [{color: '#d59563'}]
        },
        {
          featureType: 'poi',
          elementType: 'labels.text.fill',
          stylers: [{color: '#d59563'}]
        },
        {
          featureType: 'poi.park',
          elementType: 'geometry',
          stylers: [{color: '#263c3f'}]
        },
        {
          featureType: 'poi.park',
          elementType: 'labels.text.fill',
          stylers: [{color: '#6b9a76'}]
        },
        {
          featureType: 'road',
          elementType: 'geometry',
          stylers: [{color: '#38414e'}]
        },
        {
          featureType: 'road',
          elementType: 'geometry.stroke',
          stylers: [{color: '#212a37'}]
        },
        {
          featureType: 'road',
          elementType: 'labels.text.fill',
          stylers: [{color: '#9ca5b3'}]
        },
        {
          featureType: 'road.highway',
          elementType: 'geometry',
          stylers: [{color: '#746855'}]
        },
        {
          featureType: 'road.highway',
          elementType: 'geometry.stroke',
          stylers: [{color: '#1f2835'}]
        },
        {
          featureType: 'road.highway',
          elementType: 'labels.text.fill',
          stylers: [{color: '#f3d19c'}]
        },
        {
          featureType: 'transit',
          elementType: 'geometry',
          stylers: [{color: '#2f3948'}]
        },
        {
          featureType: 'transit.station',
          elementType: 'labels.text.fill',
          stylers: [{color: '#d59563'}]
        },
        {
          featureType: 'water',
          elementType: 'geometry',
          stylers: [{color: '#17263c'}]
        },
        {
          featureType: 'water',
          elementType: 'labels.text.fill',
          stylers: [{color: '#515c6d'}]
        },
        {
          featureType: 'water',
          elementType: 'labels.text.stroke',
          stylers: [{color: '#17263c'}]
        }
    ]
};
</script>