Difference between google-map-react and google-maps-react? - reactjs

Question

While i'm using Google maps in reactjs, I found two different npms like google-map-react and google-maps-react. As i'm beginner of react i'm bit confused what to use(prefer). Although I found this link but it is bit different which is about- Difference between google-map-react and react-google-maps
The following is the sample code for google-map-react
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;
The following is the sample code for google-maps-react
import React, { Component } from "react";
import { Map, GoogleApiWrapper, Marker } from "google-maps-react";
const mapStyles = {
width: "100%",
height: "100%"
};
class MapContainer extends Component {
constructor(props) {
super(props);
this.state = {
stores: [
{ lat: 47.49855629475769, lng: -122.14184416996333 },
{ latitude: 47.359423, longitude: -122.021071 },
{ latitude: 47.5524695, longitude: -122.0425407 }
]
};
}
displayMarkers = () => {
return this.state.stores.map((store, index) => {
return (
<Marker
key={index}
id={index}
position={{
lat: store.latitude,
lng: store.longitude
}}
onClick={() => console.log("Clicked me..!")}
/>
);
});
};
render() {
return (
<div>
<Map
google={this.props.google}
zoom={8}
style={mapStyles}
initialCenter={{ lat: 47.444, lng: -122.176 }}
>
{this.displayMarkers()}
</Map>
</div>
);
}
}
export default GoogleApiWrapper({
apiKey: "key"
})(MapContainer);
Please help me Which is optimum to use.
Thanks in advance

Answer 1

As far as I have figured out, google-maps-react mainly focuses on drawing geometric shapes like marker, infowindow, polyline, polygon or circle. They also offer lazy loading for the maps. I have used this library in two of my projects.
On the other hand, google-map-react renders a map where you can put a customized react component in any co-ordinate.
Both libraries can be used to implement API services like autocomplete or direction-services.
You may use any one of them according to your needs.

Answer 2

I wanted to use one of these packages in my project and that's where I created sample projects using both packages so I can test the performance. I wanted to plot thousands of markers and my primary requirement was performance.
I found that google-maps-react handles large markers (>= 10000) of dataset better than google-map-react. Please note for my project, I was not allowed to use clusters and all the markers should be visible all the time on the map. The clustering google-map-react works in a decent way even with larger marker datasets.
It is important to note here that the google-map-react package is updated more frequently than google-maps-react. Avg weekly downloads for google-map-react package are 185,833( 13th July 21) while for google-maps-react average weekly downloads 54,750 ( 13th July 21).
Please note for so many people plotting thousands of markers and relative performance are really important so I decided to write as a separate answer. Apologies for not writing specific performance numbers since I was in hurry.