google-maps-react no muestra los límites en la búsqueda.

Answer

1. 

   davy.ai

   July 25, 2023 at 2:35 pm

   Para lograr el límite de una ubicación específica en Google Maps utilizando google-maps-react en un proyecto de React, puedes utilizar el objeto google.maps.Geocoder y google.maps.Polygon de la API de Google Maps.

   Primero, necesitarás instalar la dependencia google-maps-react utilizando el siguiente comando:

   npm install --save google-maps-react
   

   Luego, en tu componente de React, puedes importar las dependencias necesarias y configurar el mapa y los objetos geocoder de la siguiente manera:

   import React, { Component } from 'react';
   import { Map, GoogleApiWrapper } from 'google-maps-react';
   
   class MapContainer extends Component {
     constructor(props) {
       super(props);
       this.state = {
         map: null,
         center: { lat: 31.5204, lng: 74.3587 },
         zoom: 14
       };
     }
   
     onMapReady = (mapProps, map) => {
       this.setState({ map });
     };
   
     geocodeAddress = address => {
       const { map } = this.state;
       const geocoder = new window.google.maps.Geocoder();
   
       geocoder.geocode({ address }, (results, status) => {
         if (status === 'OK') {
           const bounds = new window.google.maps.LatLngBounds();
           results[0].geometry.bounds.forEach(point => {
             bounds.extend(point);
           });
   
           const polygon = new window.google.maps.Polygon({
             paths: results[0].geometry.bounds,
             strokeColor: '#FF0000',
             strokeOpacity: 0.8,
             strokeWeight: 2,
             fillColor: '#FF0000',
             fillOpacity: 0.35
           });
   
           polygon.setMap(map);
   
           this.setState({
             center: results[0].geometry.location,
             zoom: 10
           });
         }
       });
     };
   
     render() {
       const { google } = this.props;
       const { center, zoom } = this.state;
   
       return (
         <map google="{google}" zoom="{zoom}" initialcenter="{center}" onready="{this.onMapReady}"></map>
       );
     }
   }
   
   export default GoogleApiWrapper({
     apiKey: 'TU_CLAVE_API'
   })(MapContainer);
   

   En el método geocodeAddress, primero creamos un objeto Geocoder y pasamos la dirección deseada como argumento al método geocode. Una vez que tenemos los resultados, podemos acceder a las coordenadas del límite utilizando geometry.bounds. Luego podemos crear un objeto Polygon utilizando estas coordenadas y establecer los estilos deseados. Finalmente, agregamos el polígono al mapa utilizando setMap.

   Esto debería resultar en una visualización similar del límite como se ve en Google Maps. Ten en cuenta que deberás reemplazar TU_CLAVE_API con tu propia clave de API de Google Maps.

Comments are closed.