CODEWITHSUNDEEP
javascriptreactjsgoogle-maps
Hultan
Hultan

Reputation: 1549

Using markers in separate component for google-maps-react

My goal is to be able to use a separate component "Markers" that contains all markers for the map. I plan to use a pure component for performance enhancement. When doing this, I encountered some issues with the rendering of markers.

The problem boils down to the example below. The Marker does not show up when customMarker = true

import React from "react";
import {Map, Marker, GoogleApiWrapper} from 'google-maps-react';

const MyOwnMarker = (props) => <Marker position={{lat:40, lng:-88}}/>

export class MapContainer extends React.Component {
  
  render = () => {
    const customMarker = true
    return (
      <Map
          google={this.props.google}
          initialCenter={{lat: 40,lng: -88}}
          zoom={15}
        >
          { customMarker ? 
            <MyOwnMarker /> : 
            <Marker position={{lat:40, lng:-88}}/>
          }
      </Map>
    )
  }
}

export default GoogleApiWrapper({
  apiKey: (process.env.REACT_APP_GOOGLE_API_KEY)
})(MapContainer)

The desired outcome is that when customMarker = true it should give the same result as when customMarker = false, since the props are identical. Right now, the marker is not visible when customMarker = true.

Upvotes: 1

Views: 625

Answers (1)

Hultan
Hultan

Reputation: 1549

It seems like when you ask the question - your mind says "Actually, this is how it works". Here's how I solved it. It might be helpful for anyone seeing this post.

In the google-maps-react documentation, they also pass down the props "map" and "google". These weren't accounted for. So adding all undefined props allowed the extra component to work.

import React from "react";
import {Map, Marker, GoogleApiWrapper} from 'google-maps-react';

const MyOwnMarker = (props) => React.createElement(Marker,{
  position:{lat:40, lng:-88}, 
  ...props
})

export class MapContainer extends React.Component {
  
  render = () => {
    const customMarker = true
    return (
      <Map
          google={this.props.google}
          initialCenter={{lat: 40,lng: -88}}
          zoom={15}
        >
          { customMarker ? 
            <MyOwnMarker /> : 
            <Marker position={{lat:40, lng:-88}}/>
          }
      </Map>
    )
  }
}

export default GoogleApiWrapper({
  apiKey: (process.env.REACT_APP_GOOGLE_API_KEY)
})(MapContainer)

Upvotes: 1

Related Questions