https://carlsbergmalaysia.com.my/assets/scripts/modules/google-map.js

1$(document).ready(function () {
2
3	var carlsbergGroupGoogleMap = (function () {
4
5		/*
6		Summary:
7		Takes a CMS-editable SVG icon and converts it to a google map marker via following steps:
8		- Grabs marker icon from data attribute on <body>
9		- Extracts SVG from icon file, applies theme colours, renders down to an image URI via canvas
10		- Generates background marker shape, applies theme colours, renders down to image URI via canvas
11		- Merges icon and background images into single image URI via canvas and uses this as map marker
12		*/
13
14		// Set defaults
15		var iconWidth = 20;
16		var iconHeight = 20;
17		var backgroundWidth = 38;
18		var backgroundHeight = 51;
19		var iconOffsetX = (backgroundWidth - iconWidth) / 2; 	// Centers icon on background, horizontally
20		var iconOffsetY = (backgroundHeight - iconHeight) / 2 - 3; // Centers icon on background, vertically, then offsets a little to make it look right
21		var iconColour = '#ffffff'; // Colour of the icon and the marker stroke
22		var markerColour = '#284a41'; // Colour of the marker
23		var markerURI = ''; 			// This will hold the value of the final marker image (icon and background images combined)
24		var backgroundSVG = '<svg width="' + backgroundWidth + '" height="' + backgroundHeight + '" xmlns="http://www.w3.org/2000/svg"><path stroke-width="2" stroke="' + iconColour + '" d="m18.999999,1.5c-9.8,0 -17.7,7.8 -17.7,17.4c0,15.5 17.7,30.6 17.7,30.6s17.7,-15.4 17.7,-30.6c0,-9.6 -7.9,-17.4 -17.7,-17.4z" fill="' + markerColour + '" /></svg>'; 				// SVG for the marker background
25		var backgroundURI = 'data:image/svg+xml;utf-8,' + backgroundSVG; 	// Data URI for the marker background
26		var fallbackMarker = '/assets/images/icons/generic-marker.png?replace=000,' + markerColour.replace('#', '') + '&fuzziness=30';
27		var imageIcon;
28		var imageBackground;
29
30		// Override default marker colours with values from CSS
31		var firstMapModule = $('.module--googlemap').first();
32		if (firstMapModule) {
33			iconColour = rgb2hex(firstMapModule.css('color'));
34			markerColour = rgb2hex(firstMapModule.css('backgroundColor'));
35		}
36
37		// Initiate all functions to run on page load
38		function init() {
39			initMapMarkers();
40		}
41
42		// Convert RGB to HEX
43		function rgb2hex(rgb) {
44			rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
45			return (rgb && rgb.length === 4) ? "#" +
46				("0" + parseInt(rgb[1], 10).toString(16)).slice(-2) +
47				("0" + parseInt(rgb[2], 10).toString(16)).slice(-2) +
48				("0" + parseInt(rgb[3], 10).toString(16)).slice(-2) : ''
49			;
50		}
51
52		function initMapMarkers() {
53			iconUrl = $('body').data('favicon');
54
55			$.get(iconUrl, function (data) {
56				var xml = $.parseHTML(data);
57				var tempDom = $('<div>').append(xml);
58				var svg = tempDom.find('svg');
59				svg.css({ fill: iconColour });
60				svg.children().each(function () {
61					$(this).css({ fill: iconColour })
62				});
63				var svgPath = $('<div>').append(svg.clone()).html();
64				generateMarker('data:image/svg+xml;utf-8,' + svgPath);
65			}, 'text');
66		}
67
68		function generateMarker(iconURI) {
69			imageIcon = new Image();
70			imageIcon.onload = iconLoaded(iconURI);
71		}
72
73		function iconLoaded(iconURI) {
74			imageIcon.src = iconURI;
75			imageBackground = new Image();
76			imageBackground.onload = backgroundLoaded();
77		}
78
79		function backgroundLoaded() {
80			imageBackground.src = backgroundURI;
81			combineImages();
82		}
83
84		function combineImages() {
85			var canvas = document.createElement('canvas');
86
87			// Timeouts required since onload event not reliably/consistently invoked
88			setTimeout(function () {
89				canvas.width = backgroundWidth;
90				canvas.height = backgroundHeight;
91				var ctx = canvas.getContext('2d');
92
93				try {
94					// Most browsers handle this fine
95					ctx.drawImage(imageBackground, 0, 0, backgroundWidth, backgroundHeight);
96					ctx.drawImage(imageIcon, iconOffsetX, iconOffsetY, iconWidth, iconHeight);
97					combinedLoaded(canvas);
98				} catch (err) {
99					// IE/Edge can't handle SVG data URI being drawn to canvas, so fall-back to server-side-themed generic marker image

100					imageBackground.src = fallbackMarker;
101					setTimeout(function () {
102						ctx.drawImage(imageBackground, 0, 0, backgroundWidth, backgroundHeight);
103						combinedLoaded(canvas);
104					}, 2000);
105				}
106			}, 1000);
107		}
108
109		function combinedLoaded(canvas) {
110			try {
111				markerURI = canvas.toDataURL('image/png');
112			} catch (err) {
113				markerURI = fallbackMarker + '&height=' + backgroundHeight + '&width=' + backgroundWidth;
114			}
115
116			if (markerURI == 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAzCAYAAAD7JnqGAAAAAXNSR0IArs4c6QAAADpJREFUWAnt0DEBAAAAwqD1T20IX4hAYcCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGroEBHnsAAWpIkBIAAAAASUVORK5CYII=' || markerURI == 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAzCAYAAAD7JnqGAAAAHklEQVRYhe3BMQEAAADCoPVPbQhfoAAAAAAAAADgMh57AAF4E8QVAAAAAElFTkSuQmCC') {
117				combineImages();
118			} else {
119				initMap();
120			}
121		}
122
123		function initMap() {
124
125			$('.module--googlemap').each(function () {
126
127				var _this = $(this);
128				var thisLat = _this.data('lat');
129				var thisLng = _this.data('lng');
130				var thisZoom = _this.data('zoom');
131				var thisMarkers = _this.data('markers');
132				var markers = [];
133				var infoWindow = new google.maps.InfoWindow();
134
135				/* + sign added by surabhi*/
136				var mapOptions = {
137					scrollwheel: false,
138					center: { lat: +thisLat, lng: +thisLng },
139					zoom: +thisZoom
140				};
141
142				var map = new google.maps.Map(_this[0], mapOptions);
143
144				if (!thisMarkers) {
145					return;
146				}
147
148				var createMarker = function (markerInfo) {
149
150					var markerConfig = {
151						url: markerURI,
152						size: google.maps.Size(backgroundWidth, backgroundHeight)
153					}
154
155					var marker = new google.maps.Marker({
156						map: map,
157						position: new google.maps.LatLng(markerInfo.lat, markerInfo.long),
158						title: markerInfo.title,
159						icon: markerConfig
160					});
161
162					marker.content = '<div class="infoWindowContent">' + markerInfo.desc + '</div>';
163
164					google.maps.event.addListener(marker, 'click', function () {
165						infoWindow.setContent('<div class="theme-bg-primary-reversed"><h2>' + marker.title + '</h2>' + marker.content + '</div>');
166						infoWindow.open(map, marker);
167					});
168
169					markers.push(marker);
170				}
171
172				markerJSON = thisMarkers;
173
174				for (i = 0; i < markerJSON.length; i++) {
175					createMarker(markerJSON[i]);
176				}
177
178				var openInfoWindow = function (e, selectedMarker) {
179					e.preventDefault();
180					google.maps.event.trigger(selectedMarker, 'click');
181				}
182			});
183		}
184
185		// 'Public'
186		return {
187			init: init
188		};
189
190	})();
191
192	carlsbergGroupGoogleMap.init();
193});