Blog
Crear un polígono en Google Maps
La API de Google Maps nos ofrece muchas características y funcionalidades para poder manipular un mapa, ya sea para la versión web o móvil. Entre las funcionalidades se destaca la posibilidad de crear un polígono, la cual veremos en esta ocasión.
Cómo crear un polígono en Google Maps
Para crear un polígono en Google Maps vamos a utilizar el objeto google.maps.Polygon, con el cual definiremos las coordenadas, el color de las lineas que une los puntos y el grosor, entre otras cosas. En el siguiente ejemplo, gracias al objeto mencionado, vamos a ver un polígono que une a la Argentina con Brasil y Chile, mediante una linea roja.
<!DOCTYPE html>
<html style="height:100%">
<head>
<title>Crean un polígono en Google Maps</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
html, body{
height:100%;
margin: 0px;
}
#googleMap{
width:100%;
height:100%;
}
</style>
<script type="text/javascript">
function initialize() {
// Configuración del mapa
var mapProp = {
center: {lat: -30.466697939183756, lng: -63.462234249999995},
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Agregando el mapa al tag de id googleMap
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
// Definiendo las coordenadas para el path del polígono
var triangleCoords = [
{lat: -34.6036844, lng: -58.381559100000004}, // Brasil
{lat: -14.235004, lng: -51.92527999999999},// Argentina
{lat: -33.4488897, lng: -70.6692655} // Chile
];
// Construyendo el póligono
var poligono = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
poligono.setMap(map);
}
</script>
<script async defer type="text/javascript" src="http://maps.googleapis.com/maps/api/js?signed_in=true&callback=initialize"></script>
</head>
<body>
<div id="googleMap"></div>
</body>
</html>
Es importante prestar atención a la linea poligono.setMap(map), ya que de esa forma se agrega el polígono al mapa.
Para agregar o cambiar las coordenadas que definen el polígono debemos utilizar la variable triangleCoords, la cual es de tipo array.
Si visualizamos el mapa en nuestro navegador el resultado seria el siguiente:
Bueno gente, eso es todo por hoy. Si tienen algún problema no duden en dejar un comentario.