google maps in react app code example

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

Example 3: how to add google map in react js

import React, { Component } from 'react';import GoogleMapReact from 'google-map-react'; const AnyReactComponent = ({ text }) => <div>{text}</div>; class SimpleMap extends Component {  static defaultProps = {    center: {      lat: 59.95,      lng: 30.33    },    zoom: 11  };   render() {    return (      // Important! Always set the container height explicitly      <div style={{ height: '100vh', width: '100%' }}>        <GoogleMapReact          bootstrapURLKeys={{ key: /* YOUR KEY HERE */ }}          defaultCenter={this.props.center}          defaultZoom={this.props.zoom}        >          <AnyReactComponent            lat={59.955413}            lng={30.337844}            text="My Marker"          />        </GoogleMapReact>      </div>    );  }} export default SimpleMap;