Google Maps Initializer for websites

google-maps.js

(function($, _, window, document) {
    var API_URL = 'https://maps.googleapis.com/maps/api/js';
    var DEFAULT_INFO_WINDOW_TEMPLATE = '<div class="info-window"><h6><%= title %></h6><p class="mb-none"><%= description %></p></div>';

    var GoogleMap = function(data) {
        this.$el = $(data.el);
        this.markers = [];
        this.infoWindowTemplate = _.template(data.infoWindowTemplate || DEFAULT_INFO_WINDOW_TEMPLATE);
        this.infoWindow = false;
        this.options = GoogleMap.defaults();
    };

    GoogleMap.prototype.setOptions = function(options) {
        this.options = $.extend(true, this.options, options);
    };

    GoogleMap.prototype.getOptions = function() {
        return this.options;
    };

    GoogleMap.prototype.render = function() {
        this.map = new google.maps.Map(this.$el[0], this.getOptions());
    };

    GoogleMap.prototype.addMarker = function(data) {
        var markerData = {
            position: new google.maps.LatLng(data.lat, data.lng),
            map: this.map,
            title: data.title
        };
        if (data.icon) {
            markerData.icon = new google.maps.MarkerImage(data.icon)
        }

        var marker = new google.maps.Marker(markerData);
        marker.infoWindow = new google.maps.InfoWindow({
            content: this.infoWindowTemplate(data)
        });

        google.maps.event.addListener(marker, 'click', function() {
            this.onMarkerClick(marker);
        }.bind(this));


        this.markers.push(marker);
        marker.setMap(this.map);
        return marker;
    };

    GoogleMap.prototype.addMarkers = function(markers) {
        for(var i = 0; i < markers.length; i++) {
            this.addMarker(markers[i]);
        }
    };

    GoogleMap.prototype.onMarkerClick = function(marker) {
        marker.infoWindow.open(this.map, marker);
    };

    GoogleMap.prototype.clearMarkers = function() {
        for (var i = 0; i < this.markers.length; i++){
            this.markers[i].setMap(null);
        }
        this.markers = [];
    };

    GoogleMap.prototype.showInfoWindows = function() {
        for (var i = 0; i < this.markers.length; i++){
            var marker = this.markers[i];
            marker.infoWindow.open(this.map, marker);
        }
    };

    GoogleMap.prototype.addPolygon = function(data) {
        var options = GoogleMap.polygonDefaults();
        for (var prop in data) {
            if (data.hasOwnProperty(prop)) {
                options[prop] = data[prop];
            }
        }

        var polygon = new google.maps.Polygon(options);
        polygon.setMap(this.map);
    };

    GoogleMap.prototype.addPolygons = function(polygons) {
        for(var i = 0; i < polygons.length; i++) {
            this.addPolygon(polygons[i]);
        }
    };

    GoogleMap.prototype.enableScrollingWithMouseWheel = function() {
        this.map.setOptions({ scrollwheel: true });
    };

    GoogleMap.prototype.disableScrollingWithMouseWheel = function() {
        this.map.setOptions({ scrollwheel: false });
    };

    GoogleMap.prototype.smartScrolling = function() {
        var model = this;

        google.maps.event.addListener(model.map, 'mousedown', function(){
            model.enableScrollingWithMouseWheel();
        });

        $('body').on('mousedown', function(event) {
            var clickedInsideMap = $(event.target).parents().filter(model.$el).length > 0;
            if(!clickedInsideMap) {
                model.disableScrollingWithMouseWheel();
            }
        });

        $(window).scroll(function() {
            model.disableScrollingWithMouseWheel();
        });
    };

    GoogleMap.dependenciesLoaded = new $.Deferred();
    GoogleMap.dependenciesLoading = false;

    GoogleMap.loadDependencies = function(apiKey) {
        if (!GoogleMap.dependenciesLoading) {
            GoogleMap.dependenciesLoading = true;
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.onload = function() {
                GoogleMap.dependenciesLoaded.resolve();
            };
            document.getElementsByTagName("head")[0].appendChild(script);
            script.src = API_URL + (apiKey ? '?key=' + apiKey : '');
        }
        return GoogleMap.dependenciesLoaded;
    };

    GoogleMap.defaults = function() {
        return {
            zoom: 12,
            center: new google.maps.LatLng(52.648101, 18.866857),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: true,
            styles: [],
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL
            },
            scrollwheel: false
        };
    };

    GoogleMap.polygonDefaults = function() {
        return {
            strokeColor: '#FF0000',
            strokeOpacity: 0.3,
            strokeWeight: 1,
            fillColor: '#FF0000',
            fillOpacity: 0.1
        };
    };

    window.GoogleMap = GoogleMap;
})(jQuery, _, window, document);