Custom Google Map Class

custom-google-map.js

/* global google */
/**
 * Custom Google Maps class with custom colours
 * @param String container - the selector for the map to appear in
 * @param Object center - the lat/lng of the center of the map
 * @param INT zoom - how zoomed in do we want the map to be
 * @param Object markerLocation - the lat/lng of the marker
 * @param String markerSVG - optimised SVG of marker
 * @param INT markerSVGWidth - the height of our custom marker
 * @param INT markerSVGHeight - the height of our custom marker
 * @author CB
 */
export default class {
    constructor() {
        // Default options
        this.container = document.querySelector('.map');
        this.center = {lat: 51.5074, lng: 0.1378};
        this.zoom = 10;
        this.markerLocation = {lat: 51.5074, lng: 0.1378};
        this.markerSVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.5 81.6"><path d="M23.8 0C10.7 0 0 10.7 0 23.8c0 4.9 1.5 9.5 4.1 13.3L24 81.6l19.5-44.7c2.5-3.8 4-8.3 4-13.1C47.5 10.7 36.8 0 23.8 0zm-3.1 31.7c.9 1.2 2.1 1.7 3.6 1.7s2.6-.5 3.4-1.5c.4-.5.8-1.3 1.1-2.4H33c-.4 2.2-1.3 4.1-2.8 5.5-1.5 1.4-3.5 2.1-5.8 2.1-2.9 0-5.2-.9-6.9-2.8-1.7-1.9-2.5-4.5-2.5-7.9 0-3.6 1-6.4 2.9-8.3 1.7-1.7 3.8-2.5 6.3-2.5 3.4 0 5.9 1.1 7.5 3.4.9 1.3 1.3 2.6 1.4 3.8h-4.3c-.3-1-.6-1.7-1.1-2.2-.8-.9-1.9-1.3-3.4-1.3s-2.7.6-3.6 1.9c-.9 1.3-1.3 3-1.3 5.4s.4 3.9 1.3 5.1z" fill="#910099"/></svg>';
        this.markerSVGWidth = 25;
        this.markerSVGHeight = 43;

        // Initialisation and customisations
        this.init();
    }

    /**
     * Map initialisation and customisations
     */
    init() {
        this.map = this.setMap();
        this.map.set('styles', this.setCustomStyle());
        this.customOptions = this.setCustomOptions();
        this.marker = this.setCustomMarker();
    }

    /**
     * Initialise the google map
     * @return Object
     */
    setMap() {
        let defaultOptions = {
            zoom: this.zoom,
            center: this.center,
            streetViewControl: false
        };
        return new google.maps.Map(this.container, {...defaultOptions, ...this.customOptions});
    }

    /**
     * Create a new marker with a custom SVG
     * @return Object
     */
    setCustomMarker() {
        let icon = {
            url: this.encodeSVG(this.markerSVG),
            size: new google.maps.Size(this.markerSVGWidth, this.markerSVGHeight),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(this.markerSVGWidth / 2, this.markerSVGHeight / 2),
            scaledSize: new google.maps.Size(this.markerSVGWidth, this.markerSVGHeight)
        };

        return new google.maps.Marker({
            position: this.markerLocation,
            map: this.map,
            icon: icon
        });
    }

    /**
     * Apply any custom map options here
     * @return Object
     */
    setCustomOptions() {
        return {
            streetViewControl: false
        };
    }

    /**
     * Base64 encode SVG
     * @return String
     */
    encodeSVG(svg) {
        return 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(svg);
    }

    /**
     * Bind custom styles to our map
     * Default style - pantone colour of the year 2018
     * @return Array
     */
    setCustomStyle() {
        return [
            {
                featureType: 'labels.text',
                elementType: 'labels',
                stylers: [{
                    saturation: -100
                }]
            },
            {
                featureType: 'all',
                elementType: 'geometry',
                stylers: [
                    {
                        saturation: -50
                    },
                    {
                        hue: '#654ea3'
                    },
                    {
                        weight: 0
                    }
                ]
            },
            {
                featureType: 'poi',
                elementType: 'labels',
                stylers: [{
                    visibility: 'off'
                }]
            },
            {
                featureType: 'road',
                elementType: 'labels',
                stylers: [{
                    visibility: 'off'
                }]
            },
            {
                featureType: 'road',
                stylers: [{
                    saturation: -50
                }]
            },
            {
                featureType: 'road',
                elementType: 'geometry.stroke',
                stylers: [{
                    visibility: 'off'
                }]
            }
        ];
    }
}

example-instantiation.html

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOURAPIKEY&callback=initMap"></script>
<script>
    import CustomGoogleMap from './custom-google-map';

    window.initMap = () => {
        new GoogleMaps();
    };
</script>