expected mapDiv of type Element but was passed null

[saculdasilva]

On 1.2.2 sometimes the component returns "expected mapDiv of type Element but was passed null". Seems to be due to the 500ms timeout added on a quick glance. I managed to reproduce this passing only the style and api key parameters.

[saculdasilva]

Doesn't happen on 1.2.1, only on 1.2.2

[Shansabry]

facing the same issue. Have you got any solution for it?

[lucas-sprwt]

facing the same issue. Have you got any solution for it?

I forced it to use version 1.2.1, meanwhile I started using tomchentw's react-google-maps instead. His Marker component has a draggable prop and onDragEnd returns coordinates, which is basically all I need on my use case.

[Shansabry]

Ok Lucas, will take a look. will appreciate it if I get a working code block for it. If you don't mind, kindly share it

[lucas-sprwt]

Ok Lucas, will take a look. will appreciate it if I get a working code block for it. If you don't mind, kindly share it

Not the cleanest example but should give you a good starting point. Don't forget to add a key on the bottom for google maps.

import React, { Component } from "react"
import { withProps } from "recompose"
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps"

export class ExampleMap extends Component {

    constructor(props){
      super(props)
      this.state = {
        exampleCoords: { lat: 25.7617, lng: -80.1918 }
      }
    }

    render() {
        return (
            <>
                {/* The map itself, wraps map components */}
                <GoogleMap
                    options={{
                        mapTypeControl: false,
                        panControl: false,
                        streetViewControl: false,
                        zoomControl: true,
                    }}
                    defaultZoom={8}
                    center={this.state.exampleCoords}
                >
                        <Marker
                            position={this.state.exampleCoords}
                            draggable={true}
                            onDragEnd={(coords) => this.setState({ exampleCoords: {lat: coords.latLng.lat(), lng: coords.latLng.lng()} })}
                        />
                </GoogleMap>
            </>
        );
    }
}

export default withProps({
    googleMapURL: "https://maps.googleapis.com/maps/api/js?&key=" + "your_key_here" + "&v=3.exp&libraries=places",
    loadingElement: <div style={{ height: `400px` }} />,
    containerElement: <div style={{ height: `400px` }} />,
    mapElement: <div style={{ height: `400px` }} />
})(withScriptjs(withGoogleMap(ExampleMap)))

[Shansabry]

Thank you so much Lucas

[chrisella]

I'm having the same problem however it works fine for me in 1 part of my application and not in another.

The difference being it works on where I show the map in a Modal Dialog, so it's not initially visible, perhaps this is something to do with the problem ?

The place where I just show it immediately on a page is failing as above.

[akhmadceo]

The solution for this error just use setTimeout function

`// ** React Imports
import { Fragment, useState, useEffect } from 'react'
import MapPicker from 'react-google-map-picker'

const MapPickerLocation = ({handleChangeLocation, location}) => {

const [show, setShow] = useState(false)

useEffect(
() => {
let timer = setTimeout(() => setShow(true), 1000);

  return () => {
    clearTimeout(timer);
  };
}, [])

if (!show) {
return

Загрузка...

}
return (

<MapPicker
defaultLocation={location}
zoom={12}
mapTypeId="roadmap"
style={{height:'400px'}}
onChangeLocation={handleChangeLocation}
//onChangeZoom={handleChangeZoom}
apiKey=''/>

)
}

export default MapPickerLocation
`

[iamkhaya]

@akhmadceo solution worked for me. Problem was the MapPicker would only load on a modal and give the error when not in a modal. On versions 1.2.2, 1.2.3 and 1.2.1.

[a-simplecode]

I read the code of this nice package and I found the issue.
So when I have the time I will fix it and make a pull request

[abdulsamadayoade]

@akhmadceo solution worked for me, thank you