Hi, I'm trying to draw Polylines on the map but when I pass the data to the
InvalidValueError: not an Array
and the polilinea does not appear
This is my component
import React, { Component } from 'react';
import {Map, InfoWindow, Marker, GoogleApiWrapper, Polyline} from 'google-maps-react';
export class MapContainer extends React.Component {
render() {
const markers = this.props.markers.map((venue,i) =>{
const marker ={
position: {
lat: venue.lat,
lng: venue.lng
}
}
return <Marker key={i} {...marker} />
})
console.log(this.props.markers)
return (
<Map google={this.props.google}
zoom={5}
initialCenter={
this.props.currentP
}>
{markers}
<Polyline
paths={this.props.markers}
strokeColor="#0000FF"
strokeOpacity={0.8}
strokeWeight={2} />
</Map>
);
}
}
const LoadingContainer = (props) => (
<div>Fancy loading container!</div>
)
export default GoogleApiWrapper({
apiKey: ('AIzaSyBRr2zCSHgwDPQzdvQh1ISiFP7fuDkO_fU'),
LoadingContainer: LoadingContainer
})(MapContainer)
The coordinates are sent from another component through the props
the data has the following structure
const marker = [
{
lat: p.geometry.location.lat,
lng: p.geometry.location.lng,
},
{
lat:this.state.lat,
lng:this.state.lon
}
]
What I want is to join the two markers with a polyline
Hey! I had the same issue. I was following an example, and it shows the prop as "paths" but it's actually supposed to be "path" (without the "s"). Good Luck!
Thank you that solved the problem for me ^^
Using "path" instead of "paths" as a prop works for me . (Y)
Most helpful comment
Hey! I had the same issue. I was following an example, and it shows the prop as "paths" but it's actually supposed to be "path" (without the "s"). Good Luck!