¡Me volveré loco pronto! He leído casi toda la documentación de Google Maps JavaScript API V3 pero no puedo encontrar una manera de desarrollar el siguiente caso de uso:
Quiero crear un cuadrado/círculo/polígono con un tamaño específico en metros. El radio del círculo, o la distancia entre LAT y LNG en metros.
Sé que es posible medir la distancia en metros entre LatLngs, pero quiero crearlo con esa dimensión.
¿Hay alguien que sepa cómo hacer esto? ¡Eso sería sorprendente!
Puede usar la biblioteca Geometry y, más específicamente, el método computeOffset .
El parámetro de distance está en metros, aunque esto no está claro en los documentos.
Aquí hay un ejemplo simple usando la clase Rectangle pero puede usar cualquier forma. Para círculos, no necesita esto ya que el radio ya está expresado en metros.
Para Rectángulos, debe calcular los límites ( ne para el noreste y sw para el suroeste). Aquí creo un rectángulo (un cuadrado en este caso) con una diagonal de 500 metros.
Para los polígonos, debe proporcionar una ruta en lugar de límites, pero el método sigue siendo el mismo. Si conoce el punto de partida, la distancia y el rumbo entre cada punto de la ruta, puede crear cualquier tipo de forma.
Debe cargar la biblioteca Geometry en la llamada API: https://maps.googleapis.com/maps/api/js?libraries=geometry
function initialize() { var sw = new google.maps.LatLng(52.51,13.41); var mapOptions = { zoom: 13, center: sw, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); var marker = new google.maps.Marker({ position: sw, map: map, label: 'SW' }); var ne = google.maps.geometry.spherical.computeOffset(sw, 500, 45); var marker = new google.maps.Marker({ position: ne, map: map, label: 'NE' }); var rectangle = new google.maps.Rectangle({ strokeOpacity: 0, strokeWeight: 0, fillColor: '#FF0000', fillOpacity: .6, bounds: new google.maps.LatLngBounds(sw,ne), map: map, zIndex: 0 }); } initialize(); #map-canvas { height: 150px; } <div id="map-canvas"></div> <script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>