-
Notifications
You must be signed in to change notification settings - Fork 12
/
page.tsx
37 lines (33 loc) · 970 Bytes
/
page.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
"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>
);
}