1// Don't forget to upvote if this helps
2// You will need to insert a valid Google API key to remove the 
3// "For development purposes only" message on the map
4// You can apply for a new API here - https://cloud.google.com/maps-platform/
5// Uncomment line 23 of this and add your new API key
6
7import React from 'react';
8import {GoogleMap} from "@react-google-maps/api";
9import {useLoadScript} from "@react-google-maps/api";
10
11const mapContainerStyle = {
12    width: '100vw',
13    height: '100vh',
14}
15const center = {
16    lat: 31.968599,
17    lng: -99.901810,
18}
19
20export default function GoogleMaps() {
21    const{isLoaded, loadError} = useLoadScript({
22        // Uncomment the line below and add your API key
23        // googleMapsApiKey: '<Your API Key>',
24    });
25
26    if (loadError) return "Error loading Maps";
27    if (!isLoaded) return "Loading Maps";
28
29    return(
30        <GoogleMap 
31        mapContainerStyle={mapContainerStyle} 
32        zoom={11} 
33        center={center} 
34        />
35    )
36}