Question

Technologies:

javascript

reactjs

Tolerim

17 minutes ago

The InfoWindow is not positioned above the Google Maps Marker.

My infowindow is covering my Google Maps API marker, and I am unsure of how to adjust the infowindow's position to display above the marker on the map. Despite trying CSS, I have been unsuccessful in moving either the infowindow or the marker. The code for my Map.js file is shown below:

import React, { useState } from "react";
import {
  GoogleMap,
  useLoadScript,
  Marker,
  InfoWindow,
} from "@react-google-maps/api";

function Map() {
  const { isLoaded } = useLoadScript({
    googleMapsApiKey: process.env.NEXTPUBLICGOOGLEMAPSAPI_KEY,
  });

  const location = { lat: -33.81724, lng: 150.99908 };
  const [selectedMarker, setSelectedMarker] = useState(null);

  if (!isLoaded) return <div>Loading...</div>;

  const handleMarkerClick = (marker) => {
    setSelectedMarker(marker);
  };

  return (
    <GoogleMap
      zoom={20}
      center={{ lat: location.lat, lng: location.lng }}
      mapContainerStyle={{
        position: "relative",
        top: 50,
        right: 290,
        width: "230%",
        height: "30vh",
      }}
    >
      <Marker position={location} onClick={() => handleMarkerClick(location)} />
      {selectedMarker && (
        <InfoWindow
          position={selectedMarker}
          anchor={{
            x: 0,
            y: -40,
          }}
          onCloseClick={() => setSelectedMarker(null)}
        >
          <div>
            <h3>ABAD & VILLANUEVA SOLICITOR'S</h3>
          </div>
        </InfoWindow>
      )}
    </GoogleMap>
  );
}

export default Map;

Answers(1)

Accepted Answer

To position the InfoWindow above the Marker, you can adjust the y value of the anchor property of the InfoWindow. In the given code example, the y value is currently set to -40, which is probably not enough to move the InfoWindow above the Marker. You can increase this value until the InfoWindow is positioned correctly. Also, since the InfoWindow is a child of the Marker, it will always be stacked behind the Marker. To ensure that the InfoWindow is displayed above the Marker, you can render it outside the Marker component and pass the Marker position to its position property. Here's an updated code example with the InfoWindow rendered outside the Marker and positioned above it:

import React, { useState } from "react";
import {
  GoogleMap,
  useLoadScript,
  Marker,
  InfoWindow,
} from "@react-google-maps/api";

function Map() {
  const { isLoaded } = useLoadScript({
    googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY,
  });

  const location = { lat: -33.81724, lng: 150.99908 };
  const [selectedMarker, setSelectedMarker] = useState(null);

  if (!isLoaded) return <div>Loading...</div>;

  const handleMarkerClick = (marker) => {
    setSelectedMarker(marker);
  };

  return (
    <GoogleMap
      zoom={20}
      center={{ lat: location.lat, lng: location.lng }}
      mapContainerStyle={{
        position: "relative",
        top: 50,
        right: 290,
        width: "230%",
        height: "30vh",
      }}
    >
      <Marker position={location} onClick={() => handleMarkerClick(location)} />
      {selectedMarker && (
        <InfoWindow
          position={{ lat: selectedMarker.lat, lng: selectedMarker.lng }}
          options={{ pixelOffset: new window.google.maps.Size(0, -40) }}
          onCloseClick={() => setSelectedMarker(null)}
        >
          <div>
            <h3>ABAD & VILLANUEVA SOLICITOR'S</h3>
          </div>
        </InfoWindow>
      )}
    </GoogleMap>
  );
}

export default Map;

In this updated code example, the options property of the InfoWindow is used to adjust the offset of the InfoWindow from its position. In this case, the pixelOffset property is used to move the InfoWindow 40 pixels upwards.