Setting bounds

[Classical31]

Since this library is quite new, I am having trouble finding info. I want to set the bounds of the map based on markers that are added. Before, I used to check a ref for the maps and if it exists, update the bounds:

  useEffect(() => {
    if (mapRef.current) {
      let bounds = new google.maps.LatLngBounds();
      markers?.forEach((coord) => bounds.extend({ lat: coord.lat, lng: coord.lng }));
      mapRef.current.fitBounds(bounds);
      mapRef.current.panToBounds(bounds);

      setMapCenter({
        lat: bounds.getCenter().lat(),
        lng: bounds.getCenter().lng(),
      });
    }
  }, [markers, mapRef]);

I am having trouble accessing the map reference, or finding an appropriate map event for this. Previously, I would use an onLoad from the @react-google-maps/api but there is not one present here. How should I set map bounds?

[usefulthink]

Instead of the mapRef, you have to use the useMap() hook. Other than that that looks alright.

Let me know if you run into problems!

[usefulthink]

The basic pattern for useMap is something like this:

const CustomMap = () => {
  const map = useMap();

  useEffect(() => {
    if (!map) return;

    // here the map is loaded and you can use all of the maps API methods on it, for example
    map.fitBounds(...);
  }, [map]);

  return <Map>...</Map>
};

For this specific example, I'd recommend to use the defaultBounds prop as discussed in #376.

[boodigowda]

Hi @usefulthink
Always I am getting null for map,
how can I resolve that?

import React, { useEffect, useRef, useState } from "react";

import {
  AdvancedMarker,
  APIProvider,
  InfoWindow,
  Map,
  Pin,
  useAdvancedMarkerRef,
  useMap,
  
} from "@vis.gl/react-google-maps";
import { SYSTEM_NOT_AVAILABLE } from "../pages/MapView/MapConstants";

const API_KEY = process.env.REACT_APP_MAPS_LICENCE_KEY;

const VisMap = ({
  positions,
  onMarkerClick,
  infoWindow,
  selectedMarker,
  setSelectedMarker,
}) => {
  const [infowindowOpen, setInfowindowOpen] = useState(false);
  const [markerRef, marker] = useAdvancedMarkerRef();
  const map = useMap();
  const ZOOM_LEVEL = 10;
  const ZOOM_LEVEL_FOR_SINGLE_MARKER = 10;
  const ALERT_LEVEL = {
    CRITICAL: "critical",
    WARNING: "warning",
    NORMAL: "normal",
  };

  useEffect(() => {
    if (!map) return;
    if (positions?.length > 0 && map?.current) {
      fitMapToBounds(positions);
    }
  }, [map]);

    //fitMapToBounds will add all the markers in a single view.
    const fitMapToBounds = (positions) => {
      const markers = positions.map((marker, index) => ({
        key: index,
        position: { lat: marker.lat, lng: marker.lng },
        city: marker.city,
        address: marker.address,
      }));
      if (markers.length > 0 && map.current) {
        const bounds = new window.google.maps.LatLngBounds();
        markers.forEach((marker) => bounds.extend(marker.position));
        map.current.fitBounds(bounds);
        if(markers.length === 1){
          map.current.setZoom(ZOOM_LEVEL_FOR_SINGLE_MARKER);
        }
      }
  };


  //from latAndLngs we will get lat and lng of all locations
  const latAndLngs = positions?.map((marker) => ({
    lat: marker.lat,
    lng: marker.lng,
  }));

  // avgLat and avgLng will give us average lat and average lng based on all latAndLngs
  const avgLat =
    latAndLngs?.reduce((total, pos) => total + pos.lat, 0) /
      latAndLngs?.length || 20.5937;
  const avgLng =
    latAndLngs?.reduce((total, pos) => total + pos.lng, 0) /
      latAndLngs?.length || 20.5937;

  const handleMarkerClick = (site) => {
    onMarkerClick(site);
    setInfowindowOpen(true);
    setSelectedMarker && setSelectedMarker(site);
  };

  const getMarkerBackground = (siteStatus) => { 
    switch (siteStatus) {
      case SYSTEM_NOT_AVAILABLE:
        return "#A6A6A6";
      case ALERT_LEVEL.WARNING:
        return "#FDBF2D";
      case ALERT_LEVEL.NORMAL:
        return "#2CB82B";
      case ALERT_LEVEL.CRITICAL:
        return "#EA4335";
      default:
        return "#EA4335";
    }
  }
  const getMarkerGlyph = (siteStatus) => { 
    switch (siteStatus) {
      case SYSTEM_NOT_AVAILABLE:
        return "#696868";
      case ALERT_LEVEL.WARNING:
        return "#a88932";
      case ALERT_LEVEL.NORMAL:
        return "#007C00";
      case ALERT_LEVEL.CRITICAL:
        return "#B41412";
      default:
        return "#B41412";
    }
  }

  return (
    <APIProvider apiKey={API_KEY} libraries={["marker"]}>
      <Map
        className="vismap"
        mapId={"bf51a910020fa25a"}
        options={{
          disableDefaultUI: true,
          streetViewControl: false,
          fullscreenControl: true,
          zoomControl: true,
        }}
        defaultZoom={3}
        defaultCenter={{ lat: avgLat, lng: avgLng }}
        gestureHandling={"greedy"}
        disableDefaultUI
      >
        {positions?.map((site) => {
          return (
            <>
              <AdvancedMarker
                key={site.lat}
                ref={markerRef}
                onClick={() => {
                  handleMarkerClick(site)
                }}
                position={{ lat: site.lat, lng: site.lng }}
              >
                <Pin
                  background={getMarkerBackground(site.siteStatus)}
                  borderColor={getMarkerBackground(site.siteStatus)}
                  glyphColor={getMarkerGlyph(site.siteStatus)}
                  scale={1.2}
                />
              </AdvancedMarker>
              {infowindowOpen && (
                <InfoWindow
                  position={{ lat: selectedMarker.lat, lng: selectedMarker.lng }}
                  options={{
                    pixelOffset: new window.google.maps.Size(0, -35),
                  }}
                  onCloseClick={() => {
                    setInfowindowOpen(false);
                    setSelectedMarker("");
                  }}
                >
                  {infoWindow && infoWindow}
                </InfoWindow>
              )}
            </>
          );
        })}
      </Map>
    </APIProvider>
  );
};

export default VisMap;

[usefulthink]

Extremely simplified, your component is structured like this:

function VisMap() {
  const map = useMap();

  return (
    <APIProvider>
      <Map></Map>
    </APIProvider>
  );
}

Here, useMap doesn't work because the component that defines the context thats needed for it (APIProvider) is a child of VisMap. See #93 (reply in thread)

[boodigowda]

then where I need to use APIProvider?

[usefulthink]

I don't know, in your top-level component for example.

[telisjok]

@Classical31 I'm trying to use your code but I get 'google' is not defined. Where are you importing "google" from?

[usefulthink]

google is a global variable (i.e. window.google) that gets defined by the maps API once it has been loaded.
The APIProvider component takes care of loading the API, but when your components render for the first time, the maps API will typically not have completed loading. This is why you have to use our hooks and effects (see useApiIsLoaded(), useMapsLibrary() or useMap() ) to interact with the API.

[telisjok]

Thanks a lot for both replies @usefulthink !

[telisjok]

I tried what you suggested though and I am getting this error

useMap(): failed to retrieve APIProviderContext. Make sure that the <APIProvider> component exists and that the component you are calling `useMap()` from is a sibling of the <APIProvider>. 

This is what my component looks like

const MapView = ({}) => {
  const map = useMap();
  const [bounds, setBounds] = useState(null);

  const tripPath = trip?.attributes?.locationData?.map((item) => ({
    lat: item.latitude,
    lng: item.longitude,
  }));
  const defaultCenter = () => {
    if (!!tripPath) {
      // const half = Math.floor(tripPath.length / 3);
      return tripPath[0];
    }
  };

  useEffect(() => {
    if (!map) return;
    console.log(map);
  }, [map]);

return (
<div className="my-4 h-[400px] rounded overflow-hidden border border-solid border-gray-300">
 <APIProvider apiKey={process.env.REACT_APP_GOOGLE_MAPS_KEY}>
  <Map
   defaultZoom={14}
   defaultCenter={defaultCenter()}
   gestureHandling={"greedy"}
   disableDefaultUI={false}
   mapId={process.env.REACT_APP_GOOGLE_MAP_ID}
   // defaultBounds={mapBounds}
  >
    <Polygon
      paths={polygonPaths}
      fillOpacity="0.25"
      fillColor={"#4361EE"}
      strokeColor={"#4361EE"}
      strokeWeight=".5"
    />
      <Polyline
        path={tripPath}
        fillOpacity="0.25"
        fillColor={"#FF0000"}
        strokeColor={"#FF0000"}
        strokeWeight="2"
      />
        <AdvancedMarker
          position={tripPath?.length > 0 && tripPath[0]}
        >
          <div className="route-marker">
            <div>
              <span>Start</span>
            </div>
          </div>
        </AdvancedMarker>
        <AdvancedMarker
          position={
            tripPath?.length > 0 &&
            tripPath[tripPath?.length - 1]
          }
        >
          <div className="route-marker">
            <div>
              <span>End</span>
            </div>
          </div>
        </AdvancedMarker>
      </Map>
    </APIProvider>
  </div>
);

export default MapView;

What could be the fault?

[telisjok]

Ahh, I figured what was it. I had to move the <APIProvider> in higher levels of my components' structure. Thus, I moved it to my Root component and now all hooks are accessible!

[usefulthink]

You can't use the context (via the useMap hook) outside of the context-provider (the APIProvider component).

To fix this, you have to split the components into one that has the APIProvider and one that contains the Map and the useMap hook.