consume google map api in react code example
Example 1: 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 2: 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}
>
{ }
<></>
</GoogleMap>
</LoadScript>
)
}
export default React.memo(MyComponent)