Map class

Map.js

// import $ from 'jquery';


/**
 * Map
 */
class Map {
	/**
	 * Map.constructor
	 *
	 * @param str el
	 * @param obj options 
	 * @author Levron Jérémy <levronjeremy@19h47.fr>
	 */
	constructor(el, options) {
		this.$element = document.querySelector(el);

		if (!this.$element || !this.$element.length) {
			return;
		}

		this.defaults = {
			scrollwheel: false,
			zoomControl: true,
			mapTypeControl: false,
			scaleControl: false,
			streetViewControl: false,
			rotateControl: false,
			center: new google.maps.LatLng(0, 0),
			mapTypeId: google.maps.MapTypeId.ROADMAP,
			// styles: map_styles, 
			maxZoom: this.$element.dataset.zoom || 16,
		};

		this.options = Object.assign({}, this.defaults, options);
	}


	/**
	 * Map.setup
	 *
	 * @author  Levron Jérémy <levronjeremy@19h47.fr>
	 */
	setup() {
		if (this.$element === null) {
			return false;
		}
		// Select marker
		this.$markers = this.$element.querySelectorAll('.js-map-marker');

		// Create map
		this.map = new google.maps.Map(this.$element, this.options);

		// Add a markers reference
		this.map.markers = [];

		// Add markers
		this.$markers.forEach((marker) => {
			Map.addMarker(marker, this.map);
		});

		// center map
		Map.centerMap(this.map);

		// Return
		return this.map;
	}


	/**
	 * Map.addMarker
	 *
	 * @param  $marker 
	 * @access static
	 * @author  Levron Jérémy <levronjeremy@19h47.fr>
	 */
	static addMarker($marker, map) {
		const latlng = {
			lat: parseFloat($marker.dataset.latitude),
			lng: parseFloat($marker.dataset.longitude),
		};

		// create marker
		const marker = new google.maps.Marker({
			position: latlng,
			map,
			animation: google.maps.Animation.DROP,
			icon: {
				anchor: new google.maps.Point(9, 29),
				path: 'M15.4,2.5C13.6,0.8,11.5,0,9,0S4.4,0.8,2.6,2.5C0.9,4.2,0,6.2,0,8.6c0,1.4,0.8,3.8,2.2,7.2s3,6.4,4.5,9.2S9,29.1,9,29c0.2-0.4,0.6-1,1-1.7c0.4-0.7,1.1-2.1,2.2-4c1-2,1.9-3.8,2.7-5.5c0.8-1.7,1.5-3.4,2.2-5.2c0.7-1.8,1-3.1,1-4C18,6.2,17.1,4.2,15.4,2.5z M10.9,10.4c-0.5,0.5-1.2,0.8-2,0.8c-0.8,0-1.4-0.3-2-0.8C6.5,9.9,6.2,9.3,6.2,8.5S6.5,7.2,7,6.7c0.5-0.5,1.2-0.8,2-0.8c0.8,0,1.4,0.3,2,0.8c0.5,0.5,0.8,1.1,0.8,1.9S11.5,9.9,10.9,10.4z',
				scale: 1,
				fillColor: '#000000',
				fillOpacity: 1,
				strokeWeight: 0,
			},
		});

		// console.log(marker);

		// add to array
		map.markers.push(marker);

		// if marker contains HTML, add it to an infoWindow
		if ($marker.innerHTML) {
			// create info window
			const infowindow = new google.maps.InfoWindow({
				content: $marker.innerHTML,
			});

			// show info window when marker is clicked
			google.maps.event.addListener(marker, 'click', () => {
				infowindow.open(map, marker);
			});
		}
	}


	/**
	 * Map.centerMap
	 *
	 * @param 	obj 	map
	 * @access 	static
	 * @author  Levron Jérémy <levronjeremy@19h47.fr>
	 */
	static centerMap(map) {
		// console.info('Map.centerMap');

		const bounds = new google.maps.LatLngBounds();

		// loop through all markers and create bounds
		map.markers.forEach((marker) => {
			bounds.extend(
				new google.maps.LatLng(
					marker.position.lat(),
					marker.position.lng(),
				),
			);
		});

		return map.fitBounds(bounds);
	}
}

export default Map;