google maps for development purposes only code example

Example: react google maps for development purposes only

// Don't forget to upvote if this helps
// You will need to insert a valid Google API key to remove the 
// "For development purposes only" message on the map
// You can apply for a new API here -
// Uncomment line 23 of this and add your new API key

import React from 'react';
import {GoogleMap} from "@react-google-maps/api";
import {useLoadScript} from "@react-google-maps/api";

const mapContainerStyle = {
    width: '100vw',
    height: '100vh',
const center = {
    lat: 31.968599,
    lng: -99.901810,

export default function GoogleMaps() {
    const{isLoaded, loadError} = useLoadScript({
        // Uncomment the line below and add your API key
        // googleMapsApiKey: '<Your API Key>',

    if (loadError) return "Error loading Maps";
    if (!isLoaded) return "Loading Maps";