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:

Mapa con círculos

Mapa con los círculos.