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

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.