0

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?

Rongeegee
  • 866
  • 3
  • 10
  • 30

1 Answers1

1

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

Konrad
  • 21,590
  • 4
  • 28
  • 64