Can't add marker with google-maps-react

Question

import {Map, GoogleApiWrapper} from 'google-maps-react'


var React = require('react')

class GoogleMapContainer extends React.Component {
    render() {
        return(
            <Map google={this.props.google}
                style={{width: '100%', height: '100%', position: 'relative'}}
                className={'map'}
                zoom={14}>
              <Marker
                title={'The marker`s title will appear as a tooltip.'}
                name={'SOMA'}
                position={{lat: 37.778519, lng: -122.405640}} />
              <Marker
                name={'Dolores park'}
                position={{lat: 37.759703, lng: -122.428093}} />
              \\
            </Map>

        )
    }
}

export default GoogleApiWrapper({
  apiKey: 'AIzaSyDq-nhDEOWaOzLfFAr9Lx4dlvEBIpHMxCk'
})(GoogleMapContainer)

i have this code that gives me an error in the browser console

ReferenceError: Marker is not defined

but in the documentation of the package they never import Marker https://github.com/fullstackreact/google-maps-react

i can't discover what is happening

It looks like you're missing the Marker import: ```import {Map, Marker, GoogleApiWrapper} from 'google-maps-react'``` — Michael Lyons, Jul 13 '17 at 21:23
if i do that the error changes to "this.marker is undefined" — Ivan Babic, Jul 14 '17 at 14:55

score 0 · Answer 1 · answered Jul 13 '17 at 21:33

0

Change:

import {Map, GoogleApiWrapper} from 'google-maps-react'

to

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

Marker is not yet imported

answered Jul 13 '17 at 21:33

Jonathan Goodman

371
3
9

score 0 · Answer 2 · answered Jul 13 '17 at 21:33

0

As is said in the comments, Marker is not included in the import. The object is not defined because it was never imported. You can not use an object that is not present. Rewrite the top line to say this:

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

answered Jul 13 '17 at 21:33

Tucker David Grebitus

400
1
10

if i do that the error changes to "this.marker is undefined" – Ivan Babic Jul 14 '17 at 13:38
and in the Quickstart in https://github.com/fullstackreact/google-maps-react they never import Marker or InfoWindow – Ivan Babic Jul 14 '17 at 13:40
Is Marker imported from google maps as in `import {Marker} from 'google-maps'` – Tucker David Grebitus Jul 14 '17 at 18:28
My other thought is that perhaps google maps is not being loaded at all. I think this might be the case because after a little research I think I have found that Marker does not need to be imported to use them. So, using React it might seem like google maps getting loaded is a given when it is not. – Tucker David Grebitus Jul 14 '17 at 18:42

Can't add marker with google-maps-react

2 Answers2