Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • Jun 24 17:38
    JustFly1984 commented #1051
  • Jun 24 16:51
    cinder92 opened #1051
  • Jun 22 09:32
    JustFly1984 commented #888
  • Jun 22 09:25
    myleftshoe closed #888
  • Jun 22 09:01
    aruljayaraj commented #1050
  • Jun 22 08:28
    JustFly1984 commented #1050
  • Jun 22 08:20
    aruljayaraj opened #1050
  • Jun 22 07:25
    JustFly1984 commented #821
  • Jun 22 05:37
    iamir4g closed #1049
  • Jun 21 21:58
    Simek closed #821
  • Jun 18 12:55
    JustFly1984 commented #328
  • Jun 18 07:40
    naveensomanna commented #328
  • Jun 15 23:53
    JustFly1984 commented #917
  • Jun 15 23:53
    JustFly1984 commented #917
  • Jun 15 20:58
    becky-intelletive commented #917
  • Jun 13 20:55
    JustFly1984 commented #1049
  • Jun 10 09:44
    GiovanniGiampaolo commented #1048
  • Jun 10 07:50
    iamir4g opened #1049
  • Jun 09 20:36
    JustFly1984 commented #1043
  • Jun 09 20:35
    JustFly1984 commented #1047
Alexey Vasilevich
Hi guys. Trying to add react-google-maps to project but am I right understand that it's not possible to add custom component on the map?
Craig Pickard

Hi all, my Maps component doesn't rerender when I update props of the wrapper container, any ideas why? I'm adding to an array of object which have coords, I'm expecting the markers to be added to the map. I'm using the useEffect hook, but it does not fire when props change... CAn anyone offer advice?

outside the component:

<MyMapComponent locs={locations} />

inside component:
const MyMapComponent = withScriptjs(
  withGoogleMap(({ locs }) => {
    useEffect( () => {
}, [locs]);


Any ideas?

Kannan T
const _ = require("lodash");
const { compose, withProps, lifecycle } = require("recompose");
const {
} = require("react-google-maps");
const { SearchBox } = require("react-google-maps/lib/components/places/SearchBox");

const MapWithASearchBox = compose(
    googleMapURL: ",drawing,places",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `400px` }} />,
    mapElement: <div style={{ height: `100%` }} />,
    componentWillMount() {
      const refs = {}

        bounds: null,
        center: {
          lat: 41.9, lng: -87.624
        markers: [],
        onMapMounted: ref => {
 = ref;
        onBoundsChanged: () => {
        onSearchBoxMounted: ref => {
          refs.searchBox = ref;
        onPlacesChanged: () => {
          const places = refs.searchBox.getPlaces();
          const bounds = new google.maps.LatLngBounds();

          places.forEach(place => {
            if (place.geometry.viewport) {
            } else {
          const nextMarkers = => ({
            position: place.geometry.location,
          const nextCenter = _.get(nextMarkers, '0.position',;

            center: nextCenter,
            markers: nextMarkers,
)(props =>
        placeholder="Customized your placeholder"
          boxSizing: `border-box`,
          border: `1px solid transparent`,
          width: `240px`,
          height: `32px`,
          marginTop: `27px`,
          padding: `0 12px`,
          borderRadius: `3px`,
          boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
          fontSize: `14px`,
          outline: `none`,
          textOverflow: `ellipses`,
    {, index) =>
      <Marker key={index} position={marker.position} />

<MapWithASearchBox />
I have used the same code as above which was given in the example but am getting google is not defined error
Kannan T
Does anyone here?
Chris Bell
Can anyone help with the below stackoverflow question? really stack trying to implement user location!!!
uday chauhan
Hi I want to add Marker Clusterer.
I was able to add it but it is giving me the count of markers
I have to implement the calculate custom method, so I can give direct value but the issue is I want the value inside value of the marker in my case the pollution level to be used in computation
I want to draw two polygon on map using react-google-maps .. is there any way that both polygon should not overlapp each other?
anyone please help
export default compose(withScriptjs, withGoogleMap)(Map)
i want to access map object wich is withGoogleMap componet state.
actually i want to access map.controls to add custom buttons on react-google-maps
Ayema Chowdhury

Any idea how to solve this error: Warning: Legacy context API has been detected within a strict-mode tree.

The old API will be supported in all 16.x releases, but applications using it should migrate to the new version.

Please update the following components: withGoogleMap(Component)

@ayemac i'm thinking this is why the map isn't loading
I Kadek Bayu Arys Wisnu Kencana

Hey guys- is there a way to asynchronously render the map markers?

Have u found the solution? @belmer

Hi Guys, I am using react-google-maps
I need some help regarding map control positioning
Is it possible to change map zoom and other control placing position.
hope this will help u

addRemoveIconInDrawingManager = () => {
let map = this._map.context[MAP]
var gmnoprint = document.createElement('div')
gmnoprint.class = gmnoprint ${style.gmnoprint}
<div className="gmnoprint" title="Clear drawing" style={{ margin: '5px', zIndex: '10', position: 'absolute', right: '-10px', top: 0, }} >
<div style={{ float: 'left', lineHeight: 0 }}>
<div role="button" tabIndex="0" aria-label="Stop drawing" aria-pressed="true" draggable="false" style={{ direction: ' ltr', overflow: ' hidden', textAlign: ' left', position: ' relative', color: ' rgb(0, 0, 0)', fontFamily: ' Roboto, Arial, sans-serif', userSelect: ' none', fontSize: ' 11px', backgroundColor: ' rgb(255, 255, 255)', padding: ' 4px', borderBottomLeftRadius: ' 2px', borderTopLeftRadius: ' 2px', backgroundClip: ' padding-box', boxShadow: ' rgba(0, 0, 0, 0.3) 0px 1px 4px -1px', fontWeight: ' 500', }} >
<span style={{ display: 'inline-block' }}>
<div style={{ width: '16px', height: '16px', overflow: 'hidden', position: 'relative', }} >
position: 'absolute',
fontSize: '19px',
className="fa fa-remove"

  gmnoprint.accessKey = 'clearallbtn'
  let index = map.controls[].push(


@ayemac i think just install latest version of react-google-maps
can someone explain me how can I change old version to new?
i want to use LoadScript, but I can't read current bounds and center.
Can someone give me an example of how the heatmap works? I have tried to so hard to get the example working.
Hello! :)
Is there a way to show label inside of marker? Current label shows only on top left of marker.
Hi guys, how can I remove markers from a map before adding new ones?
How to chnage react-google-maps langauge using state or props.
I am using HOC component withScriptJs and withGoogleMapjs
@Athukorala if you want to map one marker at a time then you no need to delete previous one.just maintain an object in state and pass every time new value into it and then use <Marker position={your state pbject} /> ... it will work

@Athukorala yes

<Marker animation={} pinColor="yellow" key={i} label={{ fontWeight: 'bold', fontSize: '10px', text: `${i + 1}`, }} position={ } ></Marker>

Nick Stavrakakis
Hello to everyone! I have a little difficulty to restrict the bounds of the map, can any one give me a quick hint? 10Q!
Dilrukshan Figurado
I working on a task were, the user can search a location in google map that location lat lng is saved to the database. how do I implement a handler that would return coordinates. the project is in tsx, I'm stuck on the problem please help

Hi guys do anyone know how to fix Legacy context API has been detected within a strict-mode tree.

The old API will be supported in all 16.x releases, but applications using it should migrate to the new version.

Please update the following components: GoogleMap, Marker

@tomchentw @Kronuz
I want to update google map langauge when page language changes using button click.
Every thing works fine and components re render but lnagugae does nit chnage.
or any other way to change langauge without page refresh?
I am using withScriptjs and withGoogleMapjs
Alexey Lyakhov

The repo of this project is unmaintained more than 2 years, and we had build new version

We had rewrite it to TypeScript, and updating it frequently:
You can enjoy autocomplete.

You can see our docs:

Also a lot of examples:

The bundle size is much smaller:

Our Spectrum community:
Our Slack channel:


We are started to working on hooks in 2.0.0-alpha, everybody who is interested, are welcome jump in to debug new version till it runs smooth.

Hi team i would like to integrate Highlight particular route of multiple routes in google map using javascript or jquery
i coudn't find this code anyone help me
very urgent
Hi Circle component onRadiusChanged function is not triggering
Richardson Dackam
Hi Any update with the missing feature?
Richardson Dackam
@JustFly1984 react-google-maps/api doesn't have loadGeoJson() either
Marc Giovannoni
Hi guys, is it possible to use the mapId property so load vector map from the beta channel?
Paulina Gavilán
Hey community! Quick thing. My map is loading as a blank screen. The 'map' and satellite' and 'zoom' buttons are appearing, but nothing else :(
have to set the width and height of the map?
@PaulinaVPG have you set the position of the map to relative?
Paulina Gavilán

@umairalii Thank you for the response!

I resolved it by using a different package. I'm using Gatsby and it won't let me have an interactive map.

I'm using: gatsby-source-googlemaps-static for anyone that wonders.

Mai Ubeid
Hey community!
Did I need to have token for google map to add longitude and latitude for the map?
How to get map erros and set state using error string to diplay to user and do not let map to carsh whole app... is there any solution for my problem
@MaiUbeid not just need api key in map url ... there is no need for token
Hello everyone!
How I can prevent re-render map component with react and redux hooks?
I have a parent component that contains the map component. The parent component is subscribed to the state, makes a request to the server every n minutes, and updates the state. Every time the state is updated, my markers flash, how can I avoid this?