How to add markers in react-google-maps?
Solution 1
Added the first constant
const GettingStartedGoogleMap = withGoogleMap(props => (
<GoogleMap
ref={props.onMapLoad}
zoom={13}
center={{ lat: 21.178574, lng: 72.814149 }}
onClick={props.onMapClick}
>
{props.markers.map(marker => (
<Marker
{...marker}
onRightClick={() => props.onMarkerRightClick(marker)}
/>
))}
</GoogleMap>
Changed the containerElement size and mapElement size to pixels instead of percentage
containerElement={
<div style={{ height: `150px` }} />
}
mapElement={
<div style={{ height: `150px` }} />
}
And just adding marker to the function which was called
markers={this.state.markers}
Solution 2
I'd check over your lat, lng coordinates again. From google explaining coordinates
"Check that the first number in your latitude coordinate is between -90 and 90."
Also any other error info would be helpful getting an answer for you.
Dhaval Jardosh
Youtube Channel - EduRise Teaching Computer Science Building revolutionary products that are for the betterment of the human race. Main Reads: 10 Things instead of PUBG (Getting rid of this addiction) How to Get Most Out of School Stop Celebrating Mother's Day, Father's Day and other such days Check out this series: Captain Planet 1. Population Control 2. Child Development 3. Modern Education Other reads: Effective Parenting
Updated on June 04, 2022Comments
-
Dhaval Jardosh almost 2 years
Using React JS in Meteor 1.5
Question: Need a way to add Marker using react-google-maps
Using ES6 and in JSX format
Followed the documentation and was able to get the map embedded in, but not able to add the marker.
Here is my code:
const InitialMap = withGoogleMap(props => { var index = this.marker.index || []; return( <GoogleMap ref={props.onMapLoad} defaultZoom={14} defaultCenter={{lat: 40.6944, lng:-73.9213}} > <Marker key={index} position={marker.position} onClick={() => props.onMarkerClick(marker)} /> </GoogleMap> ) }); export default class MapContainer extends Component{ constructor(props){ this.state = { markers:[{ position:{ lat: 255.0112183, lng:121.52067570000001, } }] } } render(){ return( <div style={{height:"100%"}}> <InitialMap containerElement={ <div style={{height:"100%"}}/> } mapElement={ <div style={{height:"100%"}} /> } markers={this.state.markers} /> </div> ) } }