phamtung1
expected mapDiv of type Element but was passed null
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.
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.
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
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)))
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.
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
defaultLocation={location} zoom={12} mapTypeId="roadmap" style={{height:'400px'}} onChangeLocation={handleChangeLocation} //onChangeZoom={handleChangeZoom} apiKey=''/> </Fragment> ) }
export default MapPickerLocation `
@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.
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
