I'm new in ReactJS, currently I'm using react-google-maps for a project, I'm showing some places using FourSquare API, there is a Direction button which is supposed to show the direction from users' current location to the destination.

Here's Meeting.js

/* eslint-disable no-undef */
/* global google */
import React, { Component } from 'react';
import Map from '../../Component/Map';
import MapAPI from '../../api/GoogleMap';

class Meeting extends Component {
// constructor and other stuff...

getDirections = () => {
const DirectionsService = new google.maps.DirectionsService();

DirectionsService.route(
  {
    destination: new google.maps.LatLng(24.8861479, 67.0595196),
    origin: new google.maps.LatLng(24.8812296, 67.0727269),
    travelMode: google.maps.TravelMode.DRIVING,
  },
  (result, status) => {
    if (status === google.maps.DirectionsStatus.OK) {
      this.setState({
        directions: result,
        mapLoaded: true,
        mapVisible: true,
      });
    } else {
      alert("Sorry! Can't calculate directions!");
    }
  },
);
};

render() {
const { coords, directions, mapVisible } = this.state;

return (
  <div className="section">
    {mapVisible && (
      <Map
        coords={coords}
        dragged={this.dragged}
        isMarkerShown
        directions={directions}
        googleMapURL={MapAPI}
        loadingElement={<div style={{ height: `100%` }} />}
        containerElement={<div style={{ height: `350px` }} />}
        mapElement={<div style={{ height: `100%` }} />}
      />
    )}
  </div>
);
}
}

export default Meeting;

Here is Map.js

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

const Map = withScriptjs(
  withGoogleMap(props => (
    <GoogleMap
      defaultZoom={14}
      defaultCenter={{
        lat: props.coords.latitude,
        lng: props.coords.longitude,
      }}
      center={{ lat: props.coords.latitude, lng: props.coords.longitude }}
    >
      {props.isMarkerShown && (
        <Marker
          draggable={props.draggable || false}
          onDragEnd={e => props.dragged(e)}
          position={{ lat: props.coords.latitude, lng: props.coords.longitude }}
        />
      )}

      {props.directions && <DirectionsRenderer directions={props.directions} />}
    </GoogleMap>
  )),
);

export default Map;

The getDirections function is called on a button, it's neither working on ponentDidMount neither on button click, in both cases I'm getting same error.

I think it's because of the async loading of Google from but couldn't find a way to fix this, I saw same question's being asked but not satisfactory answer is there. Any help would be appreciated.

I'm new in ReactJS, currently I'm using react-google-maps for a project, I'm showing some places using FourSquare API, there is a Direction button which is supposed to show the direction from users' current location to the destination.

Here's Meeting.js

/* eslint-disable no-undef */
/* global google */
import React, { Component } from 'react';
import Map from '../../Component/Map';
import MapAPI from '../../api/GoogleMap';

class Meeting extends Component {
// constructor and other stuff...

getDirections = () => {
const DirectionsService = new google.maps.DirectionsService();

DirectionsService.route(
  {
    destination: new google.maps.LatLng(24.8861479, 67.0595196),
    origin: new google.maps.LatLng(24.8812296, 67.0727269),
    travelMode: google.maps.TravelMode.DRIVING,
  },
  (result, status) => {
    if (status === google.maps.DirectionsStatus.OK) {
      this.setState({
        directions: result,
        mapLoaded: true,
        mapVisible: true,
      });
    } else {
      alert("Sorry! Can't calculate directions!");
    }
  },
);
};

render() {
const { coords, directions, mapVisible } = this.state;

return (
  <div className="section">
    {mapVisible && (
      <Map
        coords={coords}
        dragged={this.dragged}
        isMarkerShown
        directions={directions}
        googleMapURL={MapAPI}
        loadingElement={<div style={{ height: `100%` }} />}
        containerElement={<div style={{ height: `350px` }} />}
        mapElement={<div style={{ height: `100%` }} />}
      />
    )}
  </div>
);
}
}

export default Meeting;

Here is Map.js

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

const Map = withScriptjs(
  withGoogleMap(props => (
    <GoogleMap
      defaultZoom={14}
      defaultCenter={{
        lat: props.coords.latitude,
        lng: props.coords.longitude,
      }}
      center={{ lat: props.coords.latitude, lng: props.coords.longitude }}
    >
      {props.isMarkerShown && (
        <Marker
          draggable={props.draggable || false}
          onDragEnd={e => props.dragged(e)}
          position={{ lat: props.coords.latitude, lng: props.coords.longitude }}
        />
      )}

      {props.directions && <DirectionsRenderer directions={props.directions} />}
    </GoogleMap>
  )),
);

export default Map;

The getDirections function is called on a button, it's neither working on ponentDidMount neither on button click, in both cases I'm getting same error.

I think it's because of the async loading of Google from but couldn't find a way to fix this, I saw same question's being asked but not satisfactory answer is there. Any help would be appreciated.

• javascript
• reactjs

• I don't think you can access new google.maps... outside of the ponent where you import 'react-google-maps'. – c-chavez Commented Nov 6, 2018 at 16:21
• stackoverflow./a/67870982/7473966 – Ronish Commented Jun 7, 2021 at 11:40

1 Answer 1

This is because you import react-google-maps in your Map.js and you are calling google in your Meeting.js, google is available in your Map.js - try using it in there and you will be ready to go!

https://codesandbox.io/embed/nkykvozl34

UPDATE:

The configuration of the package react-google-maps has been updated: https://tomchentw.github.io/react-google-maps/#usage--configuration