google-maps-react change lat and lng value won't update the map

315 Views Asked by At

Current I faced a problem with google-maps-react, When I change the value of lat and lng. The location of the map won't change to the location selected using a select box.

...
  const [selectedCountry, setSelectedCountry] = useState({});
  const handleChangeCountry = (event, index) => {
    setLoading('true');
    setSelectedIndex(index);
    setCountryValue(countryList[index]);
  };
 const setCountryValue = (value) => {
    let updatedValue = {};
    updatedValue = value;
    setSelectedCountry(selectedCountry => ({
      ...selectedCountry,
      ...updatedValue
    }))
    setLoading('false');
  };

<Map
              google={window.google}
              zoom={10}
              style={mapStyles}
              initialCenter={
                {
                  lat: selectedCountry.latlng[0],
                  lng: selectedCountry.latlng[1]
                }
              }
            ><Marker 
            name={'Current location'} />
            </Map>

Below I have provided some screenshot.

enter image description here

enter image description here

As you can see the value change in the right details section, but the map at the middle still remains the same as the 1st picture.

Thanks for taking your time to help me/

1

There are 1 best solutions below

0
Niko Zen On

Iḿ not pretty sure but seems like there is a google method called $setMap() and you can create a global variable that holds the map and then do something like:

if (map) {
//este metodo (setMap) pertenece a google
map.setMap(null);

} I still dont´t find it but Iḿ almost sure it could be a way to solve it. Another think to get present itś that went you recall the function that draw the map mapInit() or how ever you call it, it should be do it throw a callback. Sorry for my bad english.

Iḿ trying to give the latitud and longitud drectly throw a .json file

if (city){ pos = cities_coords.paises.find((obj) => obj.name.toLowerCase() == country.toLowerCase()).cities.find((o_city) => Object.keys(o_city)[0].toLowerCase() == city.toLowerCase()).coords;
infoWindow.setPosition(pos); infoWindow.open(map);