Introducción a Google Maps APIv3 (parte 8): Creando círculos
Introducción
En entradas anteriores, ya habíamos visto como añadir líneas y polígonos a nuestros mapas creados con la API de Google Maps. En esta ocasión, añadiremos círculos.
Creación de las localizaciones
En primer lugar, crearemos un array de objetos que contengan las coordenadas y la población de cada ciudad.
var citymap = {
Barcelona: {
center: {lat: 41.381601, lng: 2.172852},
population: 5524000
},
Tarragona: {
center: {lat: 41.117280, lng: 1.250000},
population: 800962
},
Lérida: {
center: {lat: 41.624323, lng: 0.623779},
population: 438001
},
Gerona: {
center: {lat: 41.984658, lng: 2.821045},
population: 706185
}
};
Creación del mapa y de los círculos
Una vez creadas todas las localizaciones, nos faltará generar el mapa. Esto lo haremos de la misma manera que en el resto de tutoriales anteriores.
window.onload = function() {
var mapa = new google.maps.Map(document.getElementById('mapa'), {
zoom: 8,
center: {lat: 41.652393, lng: 1.691895},
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// aquí el resto del código ...
}Con un bucle for creamos un círculo para cada localización, basándonos en la población para establecer su diámetro.
for (var city in citymap) {
var cityCircle = new google.maps.Circle({
strokeColor: '#0000FF',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#5882FA',
fillOpacity: 0.35,
map: mapa,
center: citymap[city].center,
radius: Math.sqrt(citymap[city].population) * 10
});
}
El resultado final es:
Deja una respuesta