Copia, pega y colorea

Hoy me ha tocado montar un administrador de áreas de actuación de una empresa para lo que tenemos una serie de geolocalizaciones y rango de kilómetros de influencia. Como el cliente no se sabe la longitud y latitud de las zonas, primero ha tocado gracias a la API de Google maps el calcular esas coordenadas.

var geocoder = new google.maps.Geocoder(); 
geocoder.geocode({
		address : ' La dirección a buscar, España', 
		region: 'no' 
	 },
	 function(results, status) {
		 if (status.toLowerCase() == 'ok') {                            
			var _latitud = results[0]['geometry']['location'].lat();
			var _longitud = results[0]['geometry']['location'].lng();
		 }else{
			alert('La dirección especificada no se ha podido encontrar');                                             
		 }
	 }
 );

Y me he montado un objeto de JavaScript para dibujar un mapa de Google maps y permitir dibujar o eliminar círculos sobre él.

var obj_mapa = {
	mapa:null,
	circulos:[],
	init:function(){
		var mapOptions = {
			zoom: 5,
			center: new google.maps.LatLng(39, -4)
		};
		// cargamos el mapa en la capa #mapazonas
		this.mapa = new google.maps.Map(document.getElementById('mapazonas'), mapOptions);
		
		/* en caso de tener que cargar círculos desde el principio */ 
		var _self = this;
		$('input[name="longitud[]"]').each(function(index){
			var _long = $(this).val();
			var _lat = $('input[name="latitud[]"]:eq('+index+')').val();
			var _km = $('input[name="km_accion[]"]:eq('+index+')').val();
			_self.add(_lat, _long, _km);
		});
	}, 
	add:function(latitud, longitud, km){
		var populationOptions = {
			strokeColor: '#12805b',
			strokeOpacity: 0.8,
			strokeWeight: 1,
			fillColor: '#12805b',
			fillOpacity: 0.35,
			map: this.mapa,
			center: new google.maps.LatLng(latitud, longitud),
			radius: km * 1000
	  };    
	  this.circulos.push(new google.maps.Circle(populationOptions));
	},
	del:function(index){
		this.circulos[index+1].setMap(null);
		this.circulos.splice(index+1, 1);
	}
};

Y para interactuar con la clase:

// para iniciar el mapa
obj_mapa.init()

// para añadir un nuevo circulo (se guardará dentro del array obj_mapa.circulos)
obj_mapa.add(_latitud, _longitud, _kilometros_de_radio);

// y por ultimo para borrarlo (el parmámetro _index sería la posición del mapa en el array obj_mapa.circulos)
obj_del(_index)

Y por supuesto, incluir la API de google porque si no complicado esta que funcione…..

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>