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: react google ap
import {
withScriptjs,
withGoogleMap,
GoogleMap,
Marker,
} from "react-google-maps";
const MapWithAMarker = withScriptjs(withGoogleMap(props =>
<GoogleMap
defaultZoom={8}
defaultCenter={{ lat: -34.397, lng: 150.644 }}
>
<Marker
position={{ lat: -34.397, lng: 150.644 }}
/>
</GoogleMap>
));
<MapWithAMarker
googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places"
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `400px` }} />}
mapElement={<div style={{ height: `100%` }} />}
/>
Example 3: react google maps
npm i -S @react-google-maps/api
Example 4: npm google map api react
import {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react';
export class MapContainer extends Component {
render() {
return (
<Map google={this.props.google} zoom={14}>
<Marker onClick={this.onMarkerClick}
name={'Current location'} />
<InfoWindow onClose={this.onInfoWindowClose}>
<div>
<h2>{this.state.selectedPlace.name}</h2>
</div>
</InfoWindow>
</Map>
);
}
}
export default GoogleApiWrapper({
apiKey: (YOUR_GOOGLE_API_KEY_GOES_HERE)
})(MapContainer)
Example 5: react google maps api
import React from 'react'
import { GoogleMap, LoadScript } from '@react-google-maps/api';
const containerStyle = {
width: '400px',
height: '400px'
};
const center = {
lat: -3.745,
lng: -38.523
};
function MyComponent() {
return (
<LoadScript
googleMapsApiKey="YOUR_API_KEY"
>
<GoogleMap
mapContainerStyle={containerStyle}
center={center}
zoom={10}
>
{ /* Child components, such as markers, info windows, etc. */ }
<></>
</GoogleMap>
</LoadScript>
)
}
export default React.memo(MyComponent)
Example 6: 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
*/