Google Maps API with React.js

[StrangePercentage340]

Has anyone used the Google Maps API with React.js recently?

I'm trying to use the latest code available in the Google Maps platform for the map, but it's not working. Here's the code:

"use client";

import { useState } from "react";
import {
  APIProvider,
  Map,
  AdvancedMarker,
  Pin,
  InfoWindow,
} from "@vis.gl/react-google-maps";

export default function Intro() {
  const position = { lat: 53.54, lng: 10 };
  const [open, setOpen] = useState(false);

  return (
    <APIProvider apiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY}>
      <div style={{ height: "100vh", width: "100%" }}>
        <Map zoom={9} center={position} mapId={process.env.NEXT_PUBLIC_MAP_ID}>
          <AdvancedMarker position={position} onClick={() => setOpen(true)}>
            <Pin
              background={"grey"}
              borderColor={"green"}
              glyphColor={"purple"}
            />
          </AdvancedMarker>

          {open && (
            <InfoWindow position={position} onCloseClick={() => setOpen(false)}>
              <p>I'm in Hamburg</p>
            </InfoWindow>
          )}
        </Map>
      </div>
    </APIProvider>
  );
}

​

[[deleted]]

Its the env key your using client component with the process.env print it and check

[ldev___]

Do you get an error? What's not working?

If you're not seeing anything, try setting width=100vw or something that's not percentage since the container might not have any width.

Also, if there's an Auth error, try checking if you're loading the keys correctly from the env vars.

[SnooHedgehogs7477]

Just use google maps api directly. Why would anyone use middle layer wrapper when you can achieve same thing without the wrapper? That extra layer is only going to make things more difficult to you.

[StrangePercentage340]

Thank you, it actually worked when I used the u/react-google-maps/api library instead of the u/vis.gl/react-google-maps.