1

I am trying to draw curved lines using google-maps-react. In order to do this, I searched and found this question "How to curve a Polyline in react-google-maps?". In this question, the answer refers to a sandbox project, in which such an implmentation is done.

I tried to adapt this code to work for me, but I am having problems getting the "projection" of the map, which is necessary to calculate the "point", using 

const p1 = mapProjection.fromLatLngToPoint(pos1),

After searching the props and state of the map component, I found that the "getProjection" method is inside: props -> google -> maps -> Map -> prototype -> getProjection.

I tried to access it using:

mapProjection = {this.props.google.maps.Map.getProjection()}

and this results in an error "TypeError: this.props.google.maps.Map.getProjection is not a function".

Using

mapProjection = {this.props.google.maps.Map.prototype.getProjection()}

results in undefined

I am really stuck and I have no clue how to get around this. Can any of you point me in the right direction? Thank you very much.

Rafael Marques
  • 1,335
  • 4
  • 22
  • 35
  • 1
    Do you think you could put your code in a [CodeSandbox](https://codesandbox.io/) so we could see it? Might make it easier to figure something out. – Iavor Apr 02 '18 at 18:57
  • Hard to judge without the rest of the code, but my first guess: getProjection() is called too early. This post shows what you can do https://stackoverflow.com/questions/17191664/why-getprojection-is-not-working-in-v3 – Emmanuel Delay Apr 03 '18 at 13:06

1 Answers1

0

The line this.props.google.maps.Map.getProjection() is attempting to access a method on the map instance as a one that is statically available on the Map class itself. Since getProjection can only be invoked on an object of the Map class, you must call getProjection() on the map that you instantiate with new maps.Map(myDomNode, myMapConfig);

If you take a look at this tutorial How to Write a Google Maps React Component you will notice that a new map instance is created in the loadMap function of the Map component and is attached to the component with this.map = new maps.Map(node, mapConfig); .

At that point, this.map (the map instance) becomes available to any method on the Map component and you can get the projection with var projection = this.map.getProjection();

rakitin
  • 1,943
  • 6
  • 25
  • 51