[Fancy Google Map Module] #jQuery #legacyJSToRefactor

google-map.js

(function($) {

	$.fn.googleMap = function() {
		var elem = $(this),
			settings = {
				mapOptions: {
					zoomControl: false,
					streetViewControl: false,
					panControl: false,
					overviewMapControl: false,
					scaleControl: false,
					scrollwheel: false,
					navigationControl: false,
					mapTypeControl: false,
					scaleControl: false,
					draggable: false,
					zoom: 11,
					disableDoubleClickZoom: true,
					center: null,
					mapTypeId: null,
					styles: []
				},
				markerOptions: {
					markerUrl: '/images/icons/map-marker.png',
					displayWidth: 41,
					displayHeight: 50,
					originalWidth: 82,
					orignalHeight: 100,
					positionTop: 54,
					positionLeft: 41
				},
				lat: 51.899563,
				lng: -2.075837,
				link: '',
				apiKey: ''
			};

		var init = function() {

			// Parse settings
			settings = $.extend(true, {}, settings, elem.parseSettings());

			// Set link as coords if not set
			if(settings.link.length <= 0) {
				settings.link = 'http://maps.google.com/?daddr=' + settings.lat + ',' + settings.lng;
			}

			// Load api
			loadApi();
		},

		// Load api scrips and run callback
		loadApi = function() {

		   var scriptElem = document.createElement('script');

		   scriptElem.type = 'text/javascript';
		   scriptElem.src  = '//maps.google.com/maps/api/js?v=3&callback=gmapLoaded&key=' + settings.apiKey;

		   window.gmapLoaded = function(){
			   render();
		   };

		   $('head').append(scriptElem);
		},

		// Render the map
		render = function() {

			// Reset some map options
			settings.mapOptions.center = new google.maps.LatLng(settings.lat, settings.lng);
			settings.mapOptions.mapTypeId = google.maps.MapTypeId.ROADMAP;

			// Set the map element
			var mapElem = new google.maps.Map(elem[0], settings.mapOptions);

			// Set the marker
			var marker = new google.maps.Marker({
				position: new google.maps.LatLng(settings.lat, settings.lng),
				map: mapElem,
				icon: {
						url: settings.markerOptions.markerUrl,
						size: new google.maps.Size(settings.markerOptions.originalWidth, settings.markerOptions.orignalHeight), 
						scaledSize: new google.maps.Size(settings.markerOptions.displayWidth, settings.markerOptions.displayHeight), 
						origin: new google.maps.Point(0, 0),
						anchor: new google.maps.Point(settings.markerOptions.positionLeft, settings.markerOptions.positionTop) 
					}

			});

			// Go To Link on click
			google.maps.event.addListener(marker, 'click', function() {
				window.location.href = settings.link;
			});

			// Re-center map on resize
			$(window).resize(debounce(function() {
				mapElem.panTo(new google.maps.LatLng(settings.lat, settings.lng));
			}));
		};

		init();
		return this;
	};
}($));