Centralize google map issue

Question

import React, {
  useState
} from "react";

import GoogleMapReact from "google-map-react";

function GMap() {
  const [latLgn, setLatLgn] = useState([{
      lng: 24.7536,
      lat: 59.437
    },
    {
      lng: 24.7303,
      lat: 59.4393
    },
    {
      lng: 24.7387,
      lat: 59.4497
    },
  ]);
  const [tallinn] = useState({
    center: { // where i want to be centerd
      lng: 24.7536,
      lat: 59.437,
    },
    zoom: 10,
  });



  // Fit map to its bounds after the api is loaded
  const apiIsLoaded = (map, maps, latlgn) => {
    // Get bounds by our latlgn
    const bounds = getMapBounds(map, maps, latlgn);
    // Fit map to bounds
    map.fitBounds(bounds);
    // Bind the resize listener
    bindResizeListener(map, maps, bounds);
  };

  // Re-center map when resizing the window
  const bindResizeListener = (map, maps, bounds) => {
    maps.event.addDomListenerOnce(map, "idle", () => {
      maps.event.addDomListener(window, "resize", () => {
        map.fitBounds(bounds);
      });
    });
  };

  // Return map bounds based on list of places
  const getMapBounds = (map, maps, pins) => {
    const bounds = new maps.LatLngBounds();

    pins.forEach((pin) => {
      bounds.extend(new maps.LatLng(pin[1], pin[0]));
    });
    return bounds;
  };

  return ( <
    div >
    <
    div style = {
      {
        height: "100vh",
        width: "100%"
      }
    } >
    <
    GoogleMapReact bootstrapURLKeys = {
      {
        key: AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk
      }
    }
    defaultCenter = {
      tallinn.center
    }
    defaultZoom = {
      tallinn.zoom
    }
    onGoogleApiLoaded = {
      ({
        map,
        maps
      }) => apiIsLoaded(map, maps, latLgn)
    }
    yesIWantToUseGoogleMapApiInternals >
    {
      latLgn.map((item, index) => ( <
        div lat = {
          item[1]
        }
        lng = {
          item[0]
        }
        key = {
          index
        } > 
        </div>
      ))
    } </GoogleMapReact>
    </div> 
    </div>
  );
}
export default Gmap

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

I have a problem with centralizing the map I am rendering.
although I have a state with the "lat" and "lng" as stated in the docs still, when I run the app with npm start or refreshing the page, it will centre itself somewhere in the ocean.\

PS. I will paste my "map" component only.

import React, { useState } from "react";

import GoogleMapReact from "google-map-react";

export default function GMap() {
  const [latLgn, setLatLgn] = useState([{
      lng: 24.7536,
      lat: 59.437
    },
    {
      lng: 24.7303,
      lat: 59.4393
    },
    {
      lng: 24.7387,
      lat: 59.4497
    },
  ]);
  const [tallinn] = useState({
    center: { // where i want to be centerd
      lng: 24.7536,
      lat: 59.437,
    },
    zoom: 10,
  });

 

  // Fit map to its bounds after the api is loaded
  const apiIsLoaded = (map, maps, latlgn) => {
    // Get bounds by our latlgn
    const bounds = getMapBounds(map, maps, latlgn);
    // Fit map to bounds
    map.fitBounds(bounds);
    // Bind the resize listener
    bindResizeListener(map, maps, bounds);
  };

  // Re-center map when resizing the window
  const bindResizeListener = (map, maps, bounds) => {
    maps.event.addDomListenerOnce(map, "idle", () => {
      maps.event.addDomListener(window, "resize", () => {
        map.fitBounds(bounds);
      });
    });
  };

  // Return map bounds based on list of places
  const getMapBounds = (map, maps, pins) => {
    const bounds = new maps.LatLngBounds();

    pins.forEach((pin) => {
      bounds.extend(new maps.LatLng(pin[1], pin[0]));
    });
    return bounds;
  };

  return (
    <div>
      <div style={{ height: "100vh", width: "100%" }}>
        <GoogleMapReact
          bootstrapURLKeys={{key: AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk }}
          defaultCenter={tallinn.center}
          defaultZoom={tallinn.zoom}
          onGoogleApiLoaded={({ map, maps }) => apiIsLoaded(map, maps, latLgn)}
          yesIWantToUseGoogleMapApiInternals
        >
          {latLgn.map((item, index) => (
            <div lat={item[1]} lng={item[0]} key={index}< </div>
          ))}
        </GoogleMapReact>
      </div>
    </div>
  );
}

ps. let me know if I should provide more information

UPDATE

I have created a sample project here.

Answer 1

I checked your code and I noticed a couple of things.

First, in your getMapBounds function, the bounds returned are null. This is because the values of pin[1] and pin[0] are undefined. This might be the reasoon why the map is centering in the middle of the ocean like this as this is the center of the world and coordinates are 0,0. You must use pin.lat and pin.lng instead so that it will correctly populate the value for bounds.

Second, it seems that you would like to put markers on the coordinates of your latLgn. To achieve this, you can follow the AnyReactComponent function as mentioned in the google-map-react docs instead of putting a div directly inside the latLgn.map.

Lastly, inside your latLgn.map, you must not use item[1] and item[0] as they are also both undefined instead use item.lat and item.lng.

Here's the code snippet for my working code:

import React, { useState } from "react";
import "./style.css"
import GoogleMapReact from "google-map-react";

const AnyReactComponent = ({ text }) => <div>{text}</div>;
export default function GMap() {
  const [latLgn, setLatLgn] = useState([{
      lng: 24.7536,
      lat: 59.437
    },
    {
      lng: 24.7303,
      lat: 59.4393
    },
    {
      lng: 24.7387,
      lat: 59.4497
    },
  ]);
  const [tallinn] = useState({
    center: { // where i want to be centerd
      lng: 24.7536,
      lat: 59.437,
    },
    zoom: 10,
  });

 

  // Fit map to its bounds after the api is loaded
  const apiIsLoaded = (map, maps, latlgn) => {
    // Get bounds by our latlgn
    const bounds = getMapBounds(map, maps, latlgn);
    // Fit map to bounds
    map.fitBounds(bounds);
    // Bind the resize listener
    bindResizeListener(map, maps, bounds);
  };

  // Re-center map when resizing the window
  const bindResizeListener = (map, maps, bounds) => {
    maps.event.addDomListenerOnce(map, "idle", () => {
      maps.event.addDomListener(window, "resize", () => {
        map.fitBounds(bounds);
      });
    });
  };

  // Return map bounds based on list of places
  const getMapBounds = (map, maps, pins) => {
    const bounds = new maps.LatLngBounds();

    pins.forEach((pin) => {
      bounds.extend(new maps.LatLng(pin.lat, pin.lng));
      console.log(pin[0])
    });
    return bounds;
  };

  return (
    <div>
      <div style={{ height: "100vh", width: "100%" }}>
        <GoogleMapReact
          bootstrapURLKeys={{key: "YOUR_API_KEY" }}
          defaultCenter={tallinn.center}
          defaultZoom={tallinn.zoom}
          onGoogleApiLoaded={({ map, maps }) => apiIsLoaded(map, maps, latLgn)}
          yesIWantToUseGoogleMapApiInternals
        >
        {latLgn.map((item, index) => (
            <AnyReactComponent lat={item.lat} lng={item.lng} key={index} text={"(" +item.lat  + "," + item.lng +")"}> </AnyReactComponent>
          ))}
        </GoogleMapReact>
      </div>
    </div>
  );
}

I also noticed your question in the comment section. You can use online ides like stackblitz to provide an sscce of your code and just remove the API key. You can put a note in your question that you need to put API key to see how the code works. You can refer to my working code above.