google maps react

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

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

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

1/* Answer to: "google maps react"  */
2
3/*
4  "google-map-react" is a component written over a small set of the
5  Google Maps API. It allows you to render any React component on
6  the Google Map. It is fully isomorphic and can render on a server
7  Additionally, it can render map components in the browser even if
8  the Google Maps API is not loaded. It uses an internal, tweakable
9  hover algorithm - every object on the map can be hovered.
10  
11  Install it here:
12  https://www.npmjs.com/package/google-maps-react
13  
14  Don't forget it's also open-source! Here's the github page:
15  https://github.com/google-map-react/google-map-react
16*/