<DirectionsRenderer> not giving any results

[jwamsterdam]

The following code does not provide me a map with a route displayed:

import React, { Component } from 'react';
import { GoogleMapLoader, GoogleMap, DirectionsRenderer } from "react-google-maps";

class GoogleMaps extends Component {

render() {

const mapContainer = <div style={{ height: '100%', width: '100%' }}></div>

return (
            <GoogleMapLoader
                containerElement={mapContainer}
                googleMapElement={
                    <GoogleMap
                        defaultZoom={12}
                        defaultCenter={this.props.center}
                        options={{ streetviewcontrol: false, mapTypeControl: true }}
                        >
                        <DirectionsRenderer
                            directions={{
                                origin: 'Hoboken NJ',
                                destination: 'Carroll Gardens, Brooklyn'
                            }}/>
                    </GoogleMap>
                }
            />
        )
    }
}

export default GoogleMaps;

If I use the code without the <DirectionsRenderer> component, I do get a nice google maps view.

Do I need to assign the callback somehow to the <GoogleMap>? And if so, how? And how can I get the results json in a variable, so I can use this in my react code to parse e.g. the travel time?

btw: I am on version 4.11.0, v6 does not load the maps with the above code at all.

[jwamsterdam]

I currently have updated to react-google-maps beta (v6), and the async example is working.

The directions renderer example is still giving me google undefined errors.

can someone tell me how I can get the directions example working on the v6 version of react-google-maps?

[jwamsterdam]

Is DirectionRenderer actually implemented in v6? I see it works when I pass a pre-executed route response from google as direction prop, but I cant get the API call to work to get the response message from google. Any advice??

[jbrugman]

The DirectionRenderer seems implemented, but it needs to be feeded with the result of the DirectionsService.
If you put in the raw data as given by the Demo, it would result in this:

import _ from "lodash";

import {
    default as React,
    Component
} from "react";


import FaSpinner from "react-icons/lib/fa/spinner";

import withScriptjs from "react-google-maps/lib/async/withScriptjs";

import {
    withGoogleMap,
    GoogleMap,
    DirectionsRenderer
} from "react-google-maps";

var route={"geocoded_waypoints":[{"geocoder_status":"OK","place_id":"EigyMzk5IFMgTW9yZ2FuIFN0LCBDaGljYWdvLCBJTCA2MDYwOCwgVVNB","types":["street_address"]},{"geocoder_status":"OK","place_id":"EigxMDAxIFcgQ2VybWFrIFJkLCBDaGljYWdvLCBJTCA2MDYwOCwgVVNB","types":["street_address"]}],"routes":[{"bounds":{"south":41.85076,"west":-87.65141000000001,"north":41.85257,"east":-87.65126000000001},"copyrights":"Map data ©2017 Google","legs":[{"distance":{"text":"0.1 mi","value":203},"duration":{"text":"1 min","value":76},"end_address":"1001 W Cermak Rd, Chicago, IL 60608, USA","end_location":{"lat":41.8525704,"lng":-87.65140550000001},"start_address":"2399 S Morgan St, Chicago, IL 60608, USA","start_location":{"lat":41.8507582,"lng":-87.6512578},"steps":[{"distance":{"text":"0.1 mi","value":203},"duration":{"text":"1 min","value":76},"end_location":{"lat":41.8525704,"lng":-87.65140550000001},"polyline":{"points":"g~l~Fjk~uOiHFU@OBYN"},"start_location":{"lat":41.8507582,"lng":-87.6512578},"travel_mode":"DRIVING","encoded_lat_lngs":"g~l~Fjk~uOiHFU@OBYN","path":[{"lat":41.85076,"lng":-87.65126000000001},{"lat":41.852250000000005,"lng":-87.6513},{"lat":41.852360000000004,"lng":-87.65131000000001},{"lat":41.85244,"lng":-87.65133},{"lat":41.85257,"lng":-87.65141000000001}],"lat_lngs":[{"lat":41.85076,"lng":-87.65126000000001},{"lat":41.852250000000005,"lng":-87.6513},{"lat":41.852360000000004,"lng":-87.65131000000001},{"lat":41.85244,"lng":-87.65133},{"lat":41.85257,"lng":-87.65141000000001}],"instructions":"Head <b>north</b> on <b>S Morgan St</b> towards <b>W Cermak Rd</b>","maneuver":"","start_point":{"lat":41.8507582,"lng":-87.6512578},"end_point":{"lat":41.8525704,"lng":-87.65140550000001}}],"traffic_speed_entry":[],"via_waypoint":[],"via_waypoints":[]}],"overview_polyline":"g~l~Fjk~uO_IHi@R","summary":"S Morgan St","warnings":[],"waypoint_order":[],"overview_path":[{"lat":41.85076,"lng":-87.65126000000001},{"lat":41.852360000000004,"lng":-87.65131000000001},{"lat":41.85257,"lng":-87.65141000000001}]}],"status":"OK","request":{"origin":{"lat":41.85073,"lng":-87.65125999999998},"destination":{"lat":41.85258,"lng":-87.65141},"travelMode":"DRIVING"}};

const AsyncGettingStartedExampleGoogleMap = _.flowRight(
    withScriptjs,
    withGoogleMap,
)(props => (
    <GoogleMap
        ref={props.onMapLoad}
        defaultZoom={7}
        defaultCenter={{ lat: 41.8507300, lng: -87.6512600 }}
    >
        <DirectionsRenderer directions={route}  />
    </GoogleMap>
));

export default class App extends Component {


    handleMapLoad = this.handleMapLoad.bind(this);

    handleMapLoad(map) {
        this._mapComponent = map;
    }


    render() {
        return (
            <AsyncGettingStartedExampleGoogleMap
                googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp"
                loadingElement={
                    <div style={{ height: `100%` }}>
                        <FaSpinner
                            style={{
                                display: `block`,
                                width: `80px`,
                                height: `80px`,
                                margin: `150px auto`,
                                animation: `fa-spin 2s infinite linear`,
                            }}
                        />
                    </div>
                }
                containerElement={
                    <div style={{ height: `800px` }} />
                }
                mapElement={
                    <div style={{ height: `800px` }} />
                }
                onMapLoad={this.handleMapLoad}
            />
        );
    }
}

[tomchentw]

Please refer to Getting Help section in the README (or #469).