react goole maps api code example
Example 1: react-google-maps
// If this helps, don't forget to upvote so others can see
// Uncomment line 20 and insert your API key if you don't want the "For development purposes only" message
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";
return(
<GoogleMap
mapContainerStyle={mapContainerStyle}
zoom={11}
center={center}
/>
)
}
Example 2: google maps react
/* Answer to: "google maps react" */
/*
"google-map-react" is a component written over a small set of the
Google Maps API. It allows you to render any React component on
the Google Map. It is fully isomorphic and can render on a server
Additionally, it can render map components in the browser even if
the Google Maps API is not loaded. It uses an internal, tweakable
hover algorithm - every object on the map can be hovered.
Install it here:
https://www.npmjs.com/package/google-maps-react
Don't forget it's also open-source! Here's the github page:
https://github.com/google-map-react/google-map-react
*/