html Google Maps API

Posted 2021-05-11

// 1) Get an API Key: https://developers.google.com/maps/documentation/javascript/get-api-key#key

// 2) header: <script src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback-initMap&v=3.exp"></script>

// 3) Place below in footer or init file.
    <script>
                
        // SET DOCUMENT WIDTH AND ENABLE/DISABLE DRAGGING/ZOOMING
        var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
        var isDraggable = w > 480 ? true : false; //disables dragging on mobile
        var isScrollable = w > 480 ? true : false; //disables scrolling on mobile

        // SET UP MAP
        var map;
        function initialize() {
            
            // MAP OPTIONS
            var mapOptions = {
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: false,
                draggable: isDraggable, //isDRAGGABLE SET ABOVE
                scrollwheel: isScrollable, //isSSCROLLABLE SET ABOVE
                zoom: 15, // HIGHER IS CLOSER
                zoomControl: false,
                panControl: false,
                streetViewControl: false,
                scaleControl: false,
                overviewMapControl: false,
                center: new google.maps.LatLng(41.485614, -71.316148) // CENTER MAP WITH LATTITUDE/LONGITUDE
            };
            
            // CALL MAP
            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
            
            // SET STYLES
            var mapStyles = [ ]; //special styles here
            
            map.setOptions({styles: mapStyles});
            
            // SET VECTOR ICON
            var icon = {
                // PATH IS AN SVG
                path: 'M10.664 31.506c.17.188.335.307.493.391l.008.004.32.097.319-.097.01-.004c.158-.084.323-.203.493-.39 0 0 9.457-10.126 10.407-18.9.057-.452.096-.911.096-1.378C22.81 5.028 17.703 0 11.405 0 5.106 0 0 5.028 0 11.23c0 .474.039.938.098 1.395.971 8.772 10.566 18.881 10.566 18.881zm.66-24.417c2.31 0 4.188 1.859 4.188 4.14 0 2.282-1.878 4.14-4.187 4.14-2.31 0-4.187-1.858-4.187-4.14 0-2.282 1.88-4.14 4.187-4.14z',
                anchor: new google.maps.Point(11.5, 37),
                fillColor: '#000000',
                fillOpacity: 1,
                strokeWeight: 1,
                //strokeColor: '#000000',
                //strokeOpacity: 1,
                scale: 1
            };

            // SET MARKER WITH INFO WINDOW
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(41.485714, -71.316348),
                map: map,
                icon: icon,
                title: ''
            });
            var infoContent = '<div class="window-content"><h6>TITLE</h6><p>CONTENT</p></div>';
            var infoWindow = new google.maps.InfoWindow({
                content: infoContent
            });
                                
            // CALL MARKER 1 WINDOW
            google.maps.event.addListener(marker, 'click', function() {
                infoWindow.open(map,marker);
            });
            }
            
            // LOAD MAPS
            google.maps.event.addDomListener(window, 'load', initialize);
        
    </script>