reactjsgoogle-map-react

How does a marker in 'google-map-react' get its location based on latitude and longitude from props?


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?


Solution

  • 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

    How to access child's props