Google-maps-react: InvalidValueError: not an Array - Polylines

Created on 18 Jun 2018  路  3Comments  路  Source: fullstackreact/google-maps-react

Hi, I'm trying to draw Polylines on the map but when I pass the data to the tag it gives me the following error
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

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!

All 3 comments

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)

Was this page helpful?
0 / 5 - 0 ratings