Discussion on: How I wrote my own React wrapper for Google Map

[Rainbow Shout]

Hi Gabriel,

Do you have a recommended implemenatation of MarkerClusterer and / or Spiderfier?

Currently i'm looking at adding my marker clusterer script generator inside my MapContainer componentDidMount, but i'm not sure how to reference the 'map' item.

Many thanks,

James

[Gabriel Wu]

If you are using my wrapper, you can get the reference to map via useContext.

import React, {useContext} from 'react'
import {GoogleMapContext} from '@googlemap-react/core'

const MyComponent = () => {
  const [state, dispatch] = useContext(GoogleMapContext)

  // You can now access the map object and other objects via `state`.
  // Remember to check existence, since they might be undefined.
  state.map && state.map.setZoom(12)

  return null
}

[Gabriel Wu]

Since you mentioned componentDidMount, you are using class components instead of functional components, then you should just wrap your component with GoogleMapConsumer.

[Rainbow Shout]

If I want to use the context outside of the render method am I able to use, for example:

import {GoogleMapContext} from '@googlemap-react/core'

class MapContainer extends React.Component {

static contextType = GoogleMapContext;

//etc

and then access the map by this.context.state.map?

[Rainbow Shout]

Hm, I tried the way above and also refactored to a functional component and just used:

import React, {useContext} from "react";
import {
GoogleMapProvider,
MapBox,
Marker,
InfoWindow,
GoogleMapContext
} from "@googlemap-react/core";

const MapContainer = props => {

const map = useContext(GoogleMapContext);
console.log(map);

//etc

and I'm just seeing {state: undefined, dispatch: undefined} as my console output for map, any idea why :/