According to https://www.npmjs.com/package/google-map-react, the marker on the map get its location on the map from the longitude and latitude from props.
import React from "react";
import GoogleMapReact from 'google-map-react';
const AnyReactComponent = ({ text }) => <div>{text}</div>;
export default function SimpleMap(){
const defaultProps = {
center: {
lat: 10.99835602,
lng: 77.01502627
},
zoom: 11
};
return (
// Important! Always set the container height explicitly
<div style={{ height: '100vh', width: '100%' }}>
<GoogleMapReact
bootstrapURLKeys={{ key: "" }}
defaultCenter={defaultProps.center}
defaultZoom={defaultProps.zoom}
>
<AnyReactComponent
lat={59.955413}
lng={30.337844}
text="My Marker"
/>
</GoogleMapReact>
</div>
);
}
In the case, AnyReactComponent
is the marker on the map. However, based on the component defined above the SimpleMap component, it doesn't take 'lag' and 'lng' as props. the only prop it takes is "text". However, if I give this 'AnyReactComponent' component's lat and lng a value as props. How does this "AnyReactComponent" change its location with these two given props?
Looking at the example:
Marker never declare the props but they are used anyway when component is created in App
GoogleMapReact
just gets the lat
and lng
props from the child