DEV Community

How I wrote my own React wrapper for Google Map

Gabriel Wu on February 27, 2019

A few months ago, when I started the Neighborhood Map project of Udacity, I first checked the libraries available. There were quite a few choic...

Read full post

Rainbow Shout • Jul 9 '19

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 • Jul 10 '19

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 • Jul 10 '19

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

Rainbow Shout • Jul 17 '19

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 • Jul 17 '19

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 :/

Rainbow Shout • Jul 3 '19

Great little wrapper for Google Maps - only problem I've run into is activating the InfoWindow on Marker click - am I missing something obvious here?

Thanks,

James

Gabriel Wu • Jul 4 '19

Hi James, here is an example of InteractiveMarker.

Rainbow Shout • Jul 4 '19

Amazing, thanks Gabriel :)

I'd actually made something slightly different - an iterator that creates the InfoWindows and their anchor positions, and then an onClick for each marker that passes out the marker ID as an action to a Redux store, changing the relevant infoWindow's visibility.

Really enjoying working with your library!

Rainbow Shout • Jul 4 '19

Actually, there was one other thing - is there a list of event handlers for each component?

For example, I can set an onClick handler on Mapbox and that deals with any click events on the map itself - are there handlers for onLoad, onZoomChange, etc?

Many thanks, James

Gabriel Wu • Jul 4 '19

See PROPS & METHODS section for each component in the documentation.

Rainbow Shout • Jul 4 '19

Thanks :)

alexpaper • Jan 17 '20

Amazing!Thanks! Fast and simple!!!!