react google maps api

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/>

1npm i -S @react-google-maps/api
2

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

1npm i -S @react-google-maps/api

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)