React Google Map with DirectionsRendered, how to pass directions props?

Question

I have a problem with react-google-maps map with DirectionRenderer. I tried to pass directions props in many ways but I always get this error:

InvalidValueError: setDirections: in property routes: not an Array

I defined like below:

state= {
      a: new google.maps.LatLng(41.8507300, -87.6512600),
      b: new google.maps.LatLng(41.8525800, -87.6514100)
};

and then passed here but got the error described

<MapWithADirectionsRenderer 
       directions={ how to pass here? } />

I have also another problem: I get this error :

You have included the Google Maps API multiple times on this page. This may cause unexpected errors.

I included script tag to api google in public_html/index.html and also on the component MapWithADirectionsRenderer on googleMapURL requested params like in the official example (https://tomchentw.github.io/react-google-maps/#directionsrenderer). I cannot remove the script on index.html because if I remove it I get the 'google undefined error' . I used /*global google */ at the start of the file the I use 'new google.maps..ecc like described on another stack overflow post.

@neelima is was a custom component: a simple google map using a direction renderer. Check it out here https://tomchentw.github.io/react-google-maps/#directionsrenderer — batt, Dec 03 '22 at 12:16

score 2 · Accepted Answer · answered Mar 05 '18 at 14:36

I finally solved like below by modifying standard code from

DirectionsService.route({
    origin: new google.maps.LatLng(41.8507300, -87.6512600),
    destination: new google.maps.LatLng(41.8525800, -87.6514100),
    travelMode: google.maps.TravelMode.DRIVING,
  }, (result, status) => {
    etc etc
  });

to

DirectionsService.route({
    origin: this.props.origin,
    destination: this.props.destination,
    travelMode: google.maps.TravelMode.DRIVING,
  }, (result, status) => {
     etc etc
  });

and the pass origin and destination props like so

<MapWithADirectionsRenderer
    origin={this.state.origin} destination={this.state.destination} />

Now it works good!

salman.zare · Answer 2 · 2018-03-05T03:27:06.423

You can create a fresh project and test the following files:

App.js

import React from 'react'
import MapWithADirectionsRenderer from './MapWithADirectionsRenderer'

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      myArray: [
        {lat: -34.397, lng: 150.644},
        {lat: -24.397, lng: 140.644},
        {lat: -14.397, lng: 130.644},
      ]
    };
  };

  render() {
    return (
      <div>
        {
          this.state.myArray.map((a,index) => {
            return <MapWithADirectionsRenderer
              direction={a}
              key={index}
            />
          })
        }
      </div>
    );
  }
}

MapWithADirectionsRenderer.js

import React from 'react'
import {withScriptjs, withGoogleMap, GoogleMap, Marker} from "react-google-maps"

export default class MapWithADirectionsRenderer extends React.Component {
  render() {
    return (
      <div>
        <MyMapComponent
          key={this.props.key}
          isMarkerShown
          googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places"
          loadingElement={<div style={{height: `100%`}}/>}
          containerElement={<div style={{height: `400px`}}/>}
          mapElement={<div style={{height: `50%`}}/>}
          direction={this.props.direction}
        />
      </div>
    )
  }
}


const MyMapComponent = withScriptjs(withGoogleMap((props) =>
  <GoogleMap
    defaultZoom={8}
    defaultCenter={{lat: props.direction.lat, lng: props.direction.lng}}
  >
    {props.isMarkerShown && <Marker position={{lat: -34.397, lng: 150.644}}/>}
  </GoogleMap>
));

I tried but I get this error on console: Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it. — batt, Mar 05 '18 at 01:10
I tried but it doesn't work. In my opinion it's wrong to map each element of myArray rendering for each one. — batt, Mar 05 '18 at 13:18

React Google Map with DirectionsRendered, how to pass directions props?

2 Answers2