Google Map

This is a simple example to load Google Map based on longitude and latitude of a specific city. We used React Google Map package which you need to first install and using Google Map component available in package we design our map.

Create React App for Google Map

To create the example project for this example, open command prompt, navigate to a convenient location, and run the command as shown below :

create-react-app example2

Now navigate to the project folder and add the React Google Map package to the project as shown below :

cd example2
npm i react-google-map

Now add bootstrap to design it responsive.

npm i bootstrap-4-react

Now just replace the placeholder content of App.js with given below content :

import React, { Component } from "react";
import {
} from "react-google-maps";
import "bootstrap/dist/css/bootstrap.min.css";

const MyMapComponent = withScriptjs(
  withGoogleMap(props => (
    <GoogleMap defaultZoom={8} defaultCenter={{ lat: 30.7333, lng: 76.7794 }}>
      {props.isMarkerShown && (
        <Marker position={{ lat: 30.7333, lng: 76.7794 }} />

class App extends Component {
  render() {
    return (
        <div className="text-center">
          <h1>GOOGLE MAPS API with REACT JS</h1>
        <div className="container">
          <div className="row">
            <div className="col-12">
                  loadingElement={<div style={{ height: `100%` }} />}
                  containerElement={<div style={{ height: `400px` }} />}
                  mapElement={<div style={{ height: `100%` }} />}

export default App;

Most Helpful This Week