1// If this helps, don't forget to upvote so others can see
2// Uncomment line 20 and insert your API key if you don't want the "For development purposes only" message
3
4import React from 'react';
5import {GoogleMap} from "@react-google-maps/api";
6import {useLoadScript} from "@react-google-maps/api";
7
8const mapContainerStyle = {
9 width: '100vw',
10 height: '100vh',
11}
12const center = {
13 lat: 31.968599,
14 lng: -99.901810,
15}
16
17export default function GoogleMaps() {
18 const{isLoaded, loadError} = useLoadScript({
19 // Uncomment the line below and add your API key
20 // googleMapsApiKey: '<Your API Key>',
21 });
22
23 if (loadError) return "Error loading Maps";
24 if (!isLoaded) return "Loading Maps";
25
26 return(
27 <GoogleMap
28 mapContainerStyle={mapContainerStyle}
29 zoom={11}
30 center={center}
31 />
32 )
33}
1import {
2 withScriptjs,
3 withGoogleMap,
4 GoogleMap,
5 Marker,
6} from "react-google-maps";
7
8const MapWithAMarker = withScriptjs(withGoogleMap(props =>
9 <GoogleMap
10 defaultZoom={8}
11 defaultCenter={{ lat: -34.397, lng: 150.644 }}
12 >
13 <Marker
14 position={{ lat: -34.397, lng: 150.644 }}
15 />
16 </GoogleMap>
17));
18
19<MapWithAMarker
20 googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places"
21 loadingElement={<div style={{ height: `100%` }} />}
22 containerElement={<div style={{ height: `400px` }} />}
23 mapElement={<div style={{ height: `100%` }} />}
24/>
1import {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react';
2
3export class MapContainer extends Component {
4 render() {
5 return (
6 <Map google={this.props.google} zoom={14}>
7
8 <Marker onClick={this.onMarkerClick}
9 name={'Current location'} />
10
11 <InfoWindow onClose={this.onInfoWindowClose}>
12 <div>
13 <h2>{this.state.selectedPlace.name}</h2>
14 </div>
15 </InfoWindow>
16 </Map>
17 );
18 }
19}
20
21export default GoogleApiWrapper({
22 apiKey: (YOUR_GOOGLE_API_KEY_GOES_HERE)
23})(MapContainer)
24
1import React from 'react'
2import { GoogleMap, LoadScript } from '@react-google-maps/api';
3
4const containerStyle = {
5 width: '400px',
6 height: '400px'
7};
8
9const center = {
10 lat: -3.745,
11 lng: -38.523
12};
13
14function MyComponent() {
15 return (
16 <LoadScript
17 googleMapsApiKey="YOUR_API_KEY"
18 >
19 <GoogleMap
20 mapContainerStyle={containerStyle}
21 center={center}
22 zoom={10}
23 >
24 { /* Child components, such as markers, info windows, etc. */ }
25 <></>
26 </GoogleMap>
27 </LoadScript>
28 )
29}
30
31export default React.memo(MyComponent)