Gestire le Google Maps con gli oggetti JavaScript

Gestire le Google Maps con gli oggetti JavaScript

Gli oggetti JavaScript ci permettono di riutilizzare il nostro codice in maniera usabile ed efficace. In questo articolo vedremo come utilizzare un oggetto per gestire le Google Maps attraverso le API.

Per prima cosa inseriamo la libreria principale nel nostro documento:


<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=it"></script>
</head>

Quindi creiamo il seguente oggetto utilizzando un oggetto letterale per gestire i suoi parametri. Volendo possiamo anche definire dei parametri predefiniti:


function Mapper( params ) {
	
	this.map = document.getElementById( params.element );
	this.latitude = params.latitude;
	this.longitude = params.longitude;
	this.zoom = params.zoom;
		
		
	if( typeof this.map !== "undefined" ) {
		this.init();
	}
}
	
Mapper.prototype = {
	init: function() {
		var self = this;
		if( typeof google.maps !== "undefined" ) {
			var options = {
				zoom: self.zoom,
				center: new google.maps.LatLng( self.latitude, self.longitude ),
				mapTypeId: google.maps.MapTypeId.ROADMAP
			};
				
			var map = new google.maps.Map( self.map, options );
				
			var marker = new google.maps.Marker({
				position: new google.maps.LatLng( self.latitude, self.longitude ),
				map: map
			});
	
		}
	}	
};

Esempio d'uso:


var myMap = new Mapper({
	element: "map",
	latitude: 42.4013332,
	longitude: 14.167501,
	zoom: 12
});

Una domanda: dato che le Google Maps necessitano di stili CSS ben definiti e di un identificativo univoco, come possiamo gestire più di una mappa? Per prima cosa definiamo gli stili CSS comuni:


.map {
	width: 100%;
	height: 300px;
}

Quindi creiamo il seguente codice dinamico, ipotizzando in questo caso l'utilizzo di un database:


<?php
$db = new DB();
$maps = $db->getResults( 'SELECT * FROM maps' );
foreach( $maps as $map ) {
?>
<div class="map" id="map-<?php echo $map['id'];?>" data-latitude="<?php echo $map['latitude'];?>" data-longitude="<?php echo $map['longitude'];?>"></div>
<?php
}
?>

A questo punto creiamo il codice JavaScript:


var maps = document.querySelectorAll( ".map" );

for( var i = 0; i < maps.length;  ++i ) {
	var element = maps[i];
	var id = element.getAttribute( "id" );
	var latitude = element.getAttribute( "data-latitude" );
	var longitude = element.getAttribute( "data-longitude" );
	
	var map = new Mapper({
		element: id,
		latitude: latitude,
		longitude: longitude,
		zoom: 15
	});
}

Come si può notare l'uso degli oggetti ci permette di scrivere codice estremamente flessibile.

Ti potrebbe interessare anche

Torna su