Google Maps jQuery plugin

maps-plugin.js

(function ($) {
	'use strict';

	function Maps($root, options) {
		this.options = options;
		this.$root = $root;
		this.map = null;
		this.markerCluster = null;
		this.infoWindow = null;
		this.markers = [];

		this.init();
	}

	Maps.DEFAULTS = {
		zoom: 3,
		zoomOnScroll: false,
		mapCenter: { lat: 52.4652597, lng: 5.5719813 },
		markerIcon: '/assets/gfx/markers/marker@2x.png',
		markerIconSize: [30, 30],
		clusterMarkers: true,
		clusterOptions: {
			markerIcon: '/assets/gfx/markers/cluster-marker.png',
			markerIconSize: [46, 46],
			textSize: 15
		},
		focusOnMarkers: true,
		markerPopup: true, // Enable if you want to enable a popup on marker click
		markerTemplate: '#marker-template'
	};

	Maps.prototype.initMaps = function () {
		var self = this;

		this.map = new google.maps.Map(self.$root[0], {
			zoom: self.options.zoom,
			center: { lat: self.options.mapCenter.lat, lng: self.options.mapCenter.lng },
			scrollwheel: self.options.zoomOnScroll
		});
	};

	// Remove all markers from map
	Maps.prototype.removeMarkers = function () {
		for (var i = 0; i < this.markers.length; i++) {
			this.markers[i].setMap(null);

			if (this.options.clusterMarkers)
				this.markerCluster.removeMarker(this.markers[i]);
		}

		this.markers = [];
	};

	// Add marker to map
	// Obj should at least contain:
	//{
	//	lat: 
	//	lng:
	//	title:
	//}
	Maps.prototype.addMarker = function (obj) {
		var self = this;
		var marker = new google.maps.Marker({
			position: new google.maps.LatLng(obj.lat, obj.lng),
			map: this.map,
			title: obj.title,
			icon: {
				url: this.options.markerIcon,
				scaledSize: new google.maps.Size(this.options.markerIconSize[0], this.options.markerIconSize[1])
			} 
		});

		if (this.options.markerPopup) {
			google.maps.event.addListener(marker, 'click', (function (marker, data) {
			    return function() {
			        var content = Handlebars.compile($(self.options.markerTemplate).html())(data);

			        self.map.panTo(marker.getPosition());
			        self.infoWindow.close();
			        self.infoWindow.setContent(content);
			        self.infoWindow.open(self.map, marker);

			        // Add CSS class to maps elements
			        $('.gm-style-iw').next().addClass('gm-close');
			        $('.gm-style-iw').parent().addClass('gm-container');
			        $('.gm-style-iw').prev().addClass('gm-box');
			    };
			})(marker, obj));
		}

		// Add to markers collection
		this.markers.push(marker);

		// Add to clusterMarkers collection
		if (this.options.clusterMarkers)
			this.markerCluster.addMarker(marker);

		// Focus on added markers
		this.focusOnMarkers();
	};

	// Cluster all markers
	Maps.prototype.clusterMarkers = function () {
		if (this.options.clusterMarkers) {
			this.markerCluster = new MarkerClusterer(this.map, [], {
				gridSize: 50,
				styles: [{
					url: this.options.clusterOptions.markerIcon,
					width: this.options.clusterOptions.markerIconSize[0],
					height: this.options.clusterOptions.markerIconSize[1],
					textColor: '#FFF',
					textSize: 15
				}],
				maxZoom: 15,
				cssClass: 'custom-pin'
			});
		}
	};

	// Focuses on markers
	Maps.prototype.focusOnMarkers = function () {
		if (this.options.focusOnMarkers) {
			var latlngBounds = new google.maps.LatLngBounds();

			for (var i = 0; i < this.markers.length; i++) {
				latlngBounds.extend(this.markers[i].position);
			}

			// If only zoomed in too far, add extra bounds to zoom out.
			if (latlngBounds.getNorthEast().equals(latlngBounds.getSouthWest())) {
				var extendPoint1 = new google.maps.LatLng(latlngBounds.getNorthEast().lat() + 0.01, latlngBounds.getNorthEast().lng() + 0.01);
				var extendPoint2 = new google.maps.LatLng(latlngBounds.getNorthEast().lat() - 0.01, latlngBounds.getNorthEast().lng() - 0.01);
				latlngBounds.extend(extendPoint1);
				latlngBounds.extend(extendPoint2);
			}

			this.map.fitBounds(latlngBounds);
		}
	};

	// Refresh maps
	Maps.prototype.refreshMaps = function () {
		google.maps.event.trigger(this.map, 'resize');
	};

	Maps.prototype.init = function () {
		this.initMaps();
		this.clusterMarkers();

		this.infoWindow = new google.maps.InfoWindow();
	};

	$.fn.maps = function (options, relatedTarget) {
		return this.each(function () {
			var $root = $(this),
				data = $root.data('Maps'),
				settings = $.extend({}, Maps.DEFAULTS, options);


			if (!data) $root.data('Maps', (data = new Maps($root, settings)));
			if (typeof options === 'string') data[options](relatedTarget);
		});
	};
})(jQuery);