Google Maps

Google Maps

Usage

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

Parameters

Data Attributes Description Required
data-init="gmap" widget initializer heavy_check_mark
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. heavy_check_mark
lng The longitude heavy_check_mark
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>

Still need help? Contact Us Contact Us