Google Maps

Usage

HTML

<div data-latlng="40.729884,-73.990988" data-zoom="14" data-marker="../assets/img/marker.png">
    <div class="infowindow p-2">
        <h5>Hello</h5>
        <h6 class="text-primary">SPYRE</h6>
        <p class="mb-0">Premium Bootstrap Theme</p>
    </div>
</div>

JavaScript

<!-- Vendor Javascripts -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

Attributes

You can manage all map controls, marker, info window etc.

• data-zoom: default value is 14
• data-zoom-control: default value is true
• data-map-type-control: default value is true
• data-scale-control: default value is true
• data-street-view-control: default value is true
• data-rotate-control: default value is true
• data-full-screen-control: default value is true
• data-disable-default-ui: default value is false, which will remove all control from the map
• data-styles: default value is []
• data-streetview: default value is false
• data-pov-heading: default value is 0
• data-pov-pitch: default value is 0

Street view

<div
    data-latlng="40.729884,-73.990988"
    data-streetview="true"
    data-pov-heading="120"
    data-pov-pitch="20"
></div>

Styles

Use one of the pre-defined style from Snazzy Maps, and place into data-styles='' attribute.

<div
    data-latlng="40.729884,-73.990988"
    data-zoom="14"
    data-marker="../assets/img/marker.png"
    data-styles='[ { "featureType": "administrative", "elementType": "labels.text.fill", "stylers": [ { "color": "#444444" } ] }, { "featureType": "landscape", "elementType": "all", "stylers": [ { "color": "#f2f2f2" } ] }, { "featureType": "poi", "elementType": "all", "stylers": [ { "visibility": "off" } ] }, { "featureType": "road", "elementType": "all", "stylers": [ { "saturation": -100 }, { "lightness": 45 } ] }, { "featureType": "road.highway", "elementType": "all", "stylers": [ { "visibility": "simplified" } ] }, { "featureType": "road.arterial", "elementType": "labels.icon", "stylers": [ { "visibility": "off" } ] }, { "featureType": "transit", "elementType": "all", "stylers": [ { "visibility": "off" } ] }, { "featureType": "water", "elementType": "all", "stylers": [ { "color": "#46bcec" }, { "visibility": "on" } ] } ]'
></div>