JavaScript: gestire le Google Maps API con le classi

Le classi JavaScript ci permettono di riutilizzare il nostro codice in maniera usabile ed efficace. In questo articolo vedremo come utilizzare una classe per gestire le Google Maps tramite le API.

Possiamo creare la seguente classe:

'use strict';

class MyGoogleMap({ element, latitude, longitude, zoom }) {

    constructor() {
        this.map = null;
        this.marker = null;
        this.element = typeof element === 'string' ? document.querySelector(element) : element;
        this.latitude = latitude;
        this.longitude = longitude;
        this.zoom = zoom;

        if(typeof google !== 'undefined' && typeof google.maps !== 'undefined' && this.element !== null) {
            this.init();
        }
    }

    init() {

        const self = this;

        const coordinates = new google.maps.LatLng(self.latitude, self.longitude);

        const options = {
            zoom: self.zoom,
			center: coordinates,
			mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        self.map = new google.maps.Map(self.element, options);

        self.marker = new google.maps.Marker({
			position: coordinates,
			map: self.map
		});
    }
}

Esempio d'uso:

const myMap = new MyGoogleMap({
	element: '#map',
	latitude: 42.4013332,
	longitude: 14.167501,
	zoom: 12
});