1

Estoy intentando resolver el siguiente problema y no encuentro solución. Tengo un formulario dentro de un modal, en donde implementé el autocompletado de Google Maps para cargar direcciones en un campo. Lo que quiero lograr, es validar que esa dirección ingresada esté contenida en un área específica del mapa.

Logré encontrar esta respuesta de un compañero de Stack, en donde se crea el área específica que se desea, a partir de las coordenadas:

function initMap() {
  // Creamos la instacia bounds
  var bounds = new google.maps.LatLngBounds();

  // Extraemos las coordenadas
  var coords = '-90.833910,13.994037 -90.833918,13.994095 -90.833924,13.994152 -90.833930,13.994207 -90.833936,13.994263 -90.833943,13.994322 -90.833951,13.994382 -90.833959,13.994440 -90.833965,13.994494 -90.833971,13.994548 -90.833978,13.994608 -90.833984,13.994671 -90.833993,13.994741 -90.834001,13.994811 -90.834010,13.994877 -90.834019,13.994940 -90.834028,13.995003 -90.834036,13.995060 -90.834044,13.995110 -90.834052,13.995162 -90.834061,13.995222 -90.834067,13.995281 -90.834074,13.995336 -90.834080,13.995390 -90.834086,13.995442 -90.834092,13.995495 -90.834100,13.995553 -90.834105,13.995610 -90.834110,13.995665 -90.834116,13.995718 -90.834122,13.995769 -90.834127,13.995820 -90.834134,13.995871 -90.834141,13.995924 -90.834146,13.995974 -90.834149,13.996008 -90.834192,13.996161 -90.834732,13.996091 -90.835519,13.995989 -90.836038,13.995931 -90.836696,13.995846 -90.836677,13.995819 -90.836660,13.995674 -90.836610,13.995123 -90.836480,13.994146 -90.836461,13.994126 -90.836370,13.994036 -90.836287,13.994044 -90.836194,13.994035 -90.836012,13.993789 -90.836003,13.993753 -90.835995,13.993581 -90.836245,13.993529 -90.836375,13.993521 -90.836386,13.993516 -90.836394,13.993512 -90.836394,13.993503 -90.836395,13.993404 -90.836309,13.992635 -90.836266,13.992318 -90.836207,13.991926 -90.836192,13.991927 -90.836170,13.991932 -90.836125,13.991938 -90.836074,13.991943 -90.836010,13.991951 -90.835936,13.991961 -90.835862,13.991968 -90.835791,13.991976 -90.835722,13.991980 -90.835658,13.991985 -90.835597,13.991994 -90.835533,13.992003 -90.835471,13.992011 -90.835408,13.992018 -90.835346,13.992025 -90.835285,13.992033 -90.835228,13.992040 -90.835173,13.992045 -90.835118,13.992051 -90.835062,13.992057 -90.835002,13.992063 -90.834936,13.992071 -90.834868,13.992078 -90.834800,13.992086 -90.834733,13.992094 -90.834663,13.992102 -90.834588,13.992111 -90.834523,13.992120 -90.834474,13.992123 -90.834421,13.992129 -90.834361,13.992133 -90.834298,13.992140 -90.834229,13.992149 -90.834160,13.992161 -90.834092,13.992171 -90.834022,13.992180 -90.833954,13.992185 -90.833889,13.992191 -90.833824,13.992198 -90.833761,13.992205 -90.833709,13.992212 -90.833680,13.992216 -90.833683,13.992242 -90.833693,13.992300 -90.833704,13.992370 -90.833712,13.992445 -90.833720,13.992518 -90.833727,13.992591 -90.833736,13.992661 -90.833745,13.992730 -90.833755,13.992795 -90.833764,13.992855 -90.833772,13.992913 -90.833779,13.992971 -90.833786,13.993033 -90.833792,13.993092 -90.833799,13.993149 -90.833807,13.993202 -90.833815,13.993251 -90.833823,13.993302 -90.833830,13.993358 -90.833837,13.993410 -90.833843,13.993462 -90.833849,13.993518 -90.833857,13.993579 -90.833864,13.993641 -90.833870,13.993700 -90.833876,13.993760 -90.833881,13.993817 -90.833887,13.993871 -90.833894,13.993927 -90.833902,13.993982 -90.833910,13.994037'
    .split(' ') // Separamos por espacio
    .map(function(data) {
      var info = data.split(','), // Separamos por coma
        coord = { // Creamos el obj de coordenada
          lat: parseFloat(info[1]),
          lng: parseFloat(info[0])
        };
      // Agregamos la coordenada al bounds
      bounds.extend(coord);
      return coord;
    });


  // Creamos el poligono
  var area = new google.maps.Polygon({
    paths: coords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });

  // Creamos el mapa
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: bounds.getCenter(), // Centramos el mapa al area
    mapTypeId: 'terrain'
  });

  // Agregamos el area al mapa
  area.setMap(map);
}
#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCK3ulYYM8GCwK-_HlZVNKvkgp-zvEebUM&callback=initMap"></script>

En mi caso particular, mostrar el mapa no es algo necesario, sólo necesito que se valide la dirección contenida en el área de coordonadas. Lo que se me ocurre es que la dirección ingresada en el campo del formulario, sea convertida a coordenadas y luego usar el containsLocation() que ofrece la API de Google Maps, pero no sé cómo resolver esto.

1 respuesta 1

3

Para averiguar las coordenadas de un lugar, sea éste una referencia o una dirección, tienes que usar un objeto de tipo google.maps.Geocoder e instanciarlo como:

var geocoder = new google.maps.Geocoder();

Al usarlo de esta manera:

geocoder.geocode({address: place}, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
        var result = results[0]; // el primer resultado es el más relevante
    } else {
       console.log('Google respondió:',status);
    }
});

Obtendrás un resultado result que contiene una propiedad geometry la cual a su vez tiene una propiedad location que es una instancia de google.maps.LatLng.

Luego de eso puedes usar la función google.maps.geometry.poly.containsLocation

google.maps.geometry.poly.containsLocation(result.geometry.location, area)

Y eso devuelve un booleano: true si contiene y false en caso contrario.

Importante: Para usar las funciones geométricas tienes que incluir la librería geometry en la llamada a google maps:

 <script src="https://maps.googleapis.com/maps/api/js?library=geometry&key=AIzaSyCK3ulYYM8GCwK-_HlZVNKvkgp-zvEebUM&callback=initMap" async defer>
 </script>

Te dejé un ejemplo funcionando en: https://examples.ffflabs.com/contains_location.html

En el caso particular del polígono que muestras en tu pregunta, lamentablemente se encuentra en un área muy rural, por lo que, si hago geocodificación reversa por las coordenadas del polígono, me dice que está centrado en "unnamed road, Guatemala". Por eso el ejemplo que te dejé ocupa un lugar más central.

5
  • muchísimas gracias!! Justo lo que necesitaba. Si, el área que estaba en el ejemplo era muy rural, pero me supiste guiar de una forma muy correcta con todo y más con el ejemplo. Agradezco tu tiempo para contestar de forma tan completa. Buen domingo! el 4 nov. 2018 a las 16:56
  • Una pregunta. Cómo hago para que el usuario no pueda mover el polígono de lugar? Ya que tanto en mi implementación como en su ejemplo, si selecciono el polígono y lo desplazo, lo puedo dejar en otro lugar. el 5 nov. 2018 a las 0:22
  • Al crearlo puedes ponerle el atributo draggable: false
    – ffflabs
    el 5 nov. 2018 a las 23:32
  • Muchísimas gracias! Ya me ha funcionado todo correctamente. Gracias! el 5 nov. 2018 a las 23:38
  • he avanzado mucho, pero me he topado con un pequeño problema, y es lo único que me falta para poder terminar mi proyecto. Lo publiqué acá: es.stackoverflow.com/questions/211716/… Espero no molestarte. el 8 nov. 2018 a las 0:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.