Google Maps

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:

Polígono en Google Maps

Polígono en Google Maps

Bueno gente, eso es todo por hoy. Si tienen algún problema no duden en dejar un comentario.

Compartilo en
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestEmail this to someone

AboutJosé Di Meglio

Apasionado de la tecnología y programación. Aportando información gratuita sobre el mundo de la informática.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *