React js google map with multiple markers example. In this tutorial, i will provide you detail guide on how to add google map in React JS. And as well as how to show multiple markers on google map in react js app.
Google Maps is a free online map from Google. It’s accessible through your web browser or as an app for mobile devices. You can use Google Maps to get step-by-step directions, find information about local businesses, and a whole lot more!. A marker identifies a location on a map. By default, a marker uses a standard image. Markers can display custom images, in which case they are usually referred to as “icons.” Markers and icons are objects of type Marker . You can set a custom icon within the marker’s constructor, or by calling setIcon() on the marker.
Now in this tutorial, you will learn how to adding or implementing Google maps and display multiple markers in react application using the third-party google-maps-react plugin.
React Google Map Integration with Multiple Markers Example
- Step 1 – Create React App
- Step 2 – Install Bootstrap 4 Package
- Step 3 – Install google-maps-react in React
- Step 4 – Create Google Map Component
- Step 5 – Import Google Map Component in App.js
Step 1 – Create React App
Open your terminal and execute the following command on your terminal to create a new react app:
npx create-react-app my-react-app
Note that, if you are not new to react and already understood this process, then you can ignore above step no 1.
To run the React app, execute the following command on your terminal:
npm start
Check out your React app on this URL: localhost:3000
Step 2 – Install Bootstrap 4 Package
Execute the following commands to install boostrap 4 library into your react app:
npm install bootstrap --save
Import bootstrap.min.css file in src/App.js
file:
import React from 'react'; import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; function App() { return ( <div> <h2>How to Add Google Map in React Js App</h2> </div> ); } export default App;
Step 3 – Install google-maps-react in React
Execute the following command to install the google-map-react package:
npm install google-maps-react
Step 4 – Create Google Map Component
Go to the src directory of your react js app and create a google map component named GoogleMapComponent.js. And add the following code into it:
import React, { Component } from 'react'; import { Map, Marker, GoogleApiWrapper } from 'google-maps-react'; const customizeMap = { width: '100%', height: '100%' }; class GoogleMapComponent extends React.Component { constructor(props) { super(props); this.state = { cords: [ {latitude: 51.507351, longitude: -0.127758}, {latitude: 31.046051, longitude: 34.851612}, {latitude: 51.165691, longitude: 10.451526}, {latitude: 52.215933, longitude: 19.134422}, {latitude: 50.0874654, longitude: 14.4212535}, {latitude: 7.5554942, longitude: 80.7137847}, ] } } drawMarker = () => { return this.state.cords.map((store, i) => { return <Marker key={i} id={i} position={{ lat: store.latitude, lng: store.longitude }} onClick={() => console.log("Event Hanlder Called")} /> }) } render() { return ( <Map google={this.props.google} style={customizeMap} zoom={6} initialCenter={{ lat: 9.96233, lng: 49.80404 }}> {this.drawMarker()} </Map> ); } } export default GoogleApiWrapper({ apiKey: 'Google Maps API Token' })(GoogleMapComponent);
Note that, add the google map api token in above code.
Step 5 – Import Google Map Component in App.js
Import GoogleMapComponent.js file in src/App.js
file:
import React from 'react'; import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; import './App.css'; import GoogleMapComponent from './GoogleMapComponent'; function App() { return ( <div className="App"> <GoogleMapComponent /> </div> ); } export default App;
Conclusion
React js add google map example. In this tutorial, you have learned how to add google map and show multiple markers on it in React JS.
Be First to Comment