Check if marker is visible on ViewPort google-maps-react

Question

I am Currently working on a website like zillow.com, And I have to show data on the right side of map corresponding to the markers visible on map and whenever the user drags map I have to check for new markers on the map and show on the right panel.

const { isLoaded, loadError } = useJsApiLoader({
      googleMapsApiKey: "APIKEY",
      libraries: libraries
  });
  const mapRef = useRef();
  const onMapLoad = useCallback((map) => {
      mapRef.current = map;
  }, [])
return isLoaded && (
      <>
  <GoogleMap mapContainerStyle={mapContainerStyle}
     center={center}
     zoom={9.1}
     options={options}
     onLoad={onMapLoad}
     onDragEnd={() => console.log("DRAGGED")}
     >
    sellerData.map((element, index) => {
                          return (
                              <>
                                  <Marker
                                      key={index}
                                      position={
                                          {
                                              lat: element.Marker.lat, lng: element.Marker.lng
                                          }}
                                      icon={{
                                          url: icon,
                                          scaledSize: new window.google.maps.Size(40, 40)
                                      }}
                                  />
</GoogleMap>
<>
)```

score 0 · Accepted Answer · answered Jan 07 '22 at 16:47

Map.getBounds().getNorthEast() will get you the top east lat and lng & getBounds().getSouthWest() will get you the bottom left lat and lng. TRY This:

const OnDragEnd= ()=>{
let ne = this.map.getBounds().getNorthEast();
let sw = this.map.getBounds().getSouthWest();
 console.log(ne.lat() + ";" + ne.lng());
 console.log(sw.lat() + ";" + sw.lng());
}

Thanks me later

Boris · Answer 2 · 2022-01-08T15:35:27.060

I get bounds with this code:

import React from "react";
import { GoogleMap, useJsApiLoader } from "@react-google-maps/api";

const containerStyle = {
    width: "400px",
    height: "400px"
};

const center = {
    lat: 45.745,
    lng: 5.65
};

function Map() {
    const { isLoaded } = useJsApiLoader({
        id: "google-map-script",
        googleMapsApiKey: "AIzaSyC2-n39eQnutXECIDc-9tlNMNFmxzshDtE"
    });

    const [map, setMap] = React.useState(null);

    const onLoad = React.useCallback(function callback(map) {
        const bounds = new window.google.maps.LatLngBounds();
        console.log(bounds);
        // map.fitBounds(bounds);
        setMap(map);
    }, []);

    const onUnmount = React.useCallback(function callback(map) {
        setMap(null);
    }, []);

    return isLoaded ? (
        <GoogleMap
            mapContainerStyle={containerStyle}
            center={center}
            zoom={10}
            onLoad={onLoad}
            onUnmount={onUnmount}
            onDragEnd={() => console.log(map.getBounds())}
        >
            {/* Child components, such as markers, info windows, etc. */}
            <></>
        </GoogleMap>
    ) : (
        <></>
    );
}

export default React.memo(Map);

Check if marker is visible on ViewPort google-maps-react

2 Answers2