CODEWITHSUNDEEP
reactjsgoogle-mapscoordinates
Kelb56
Kelb56

Reputation: 657

Google maps draw route from given coordinates

I am using google-maps-react module and everything until the last stretch is fine. Using this package, I am able to click on map, set multiple markers and define my route "visually". I did not think that Polygon would not take actual streets and map geometry into consideration (stupid me). Could someone help me out and suggest on how to provide properly drawn routes on map, instead of straight lines connecting marker X to marker Y? This is what I have so far visually:

enter image description here

And this is the coordinates array that I am forming in my application and drawing polygon by:

enter image description here

I am using Google maps api and google-maps-react package.

Upvotes: 2

Views: 14870

Answers (2)

Vadim Gremyachev
Vadim Gremyachev

Reputation: 59328

As was correctly mentioned in comment, Directions API needs to be utilized for that purpose:

Directions are displayed as a polyline drawing the route on a map, or additionally as a series of textual description within a element (for example, "Turn right onto the Williamsburg Bridge ramp")

The following example demonstrates how to integrate Google Maps API Directions Service into google-maps-react to display a route.

It is assumed data prop contains coordinates represented in format specified in provided question. Directions Service code has been adapted from this example

Example

class MapContainer extends React.Component {
  constructor(props) {
    super(props);
    this.handleMapReady = this.handleMapReady.bind(this);
  }

  handleMapReady(mapProps, map) {
    this.calculateAndDisplayRoute(map);
  }

  calculateAndDisplayRoute(map) {
    const directionsService = new google.maps.DirectionsService();
    const directionsDisplay = new google.maps.DirectionsRenderer();
    directionsDisplay.setMap(map);


    const waypoints = this.props.data.map(item =>{
      return{
        location: {lat: item.lat, lng:item.lng},
        stopover: true
      }
    })
    const origin = waypoints.shift().location;
    const destination = waypoints.pop().location;

    directionsService.route({
      origin: origin,
      destination: destination,
      waypoints: waypoints,
      travelMode: 'DRIVING'
    }, (response, status) => {
      if (status === 'OK') {
        directionsDisplay.setDirections(response);
      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });
  }

  render() {
    return (
      <div className="map-container">
        <Map
          google={this.props.google}
          className={"map"}
          zoom={this.props.zoom}
          initialCenter={this.props.center}
          onReady={this.handleMapReady}
        />
      </div>
    );
  }
}

Demo

Upvotes: 4

Khaladin
Khaladin

Reputation: 508

You might want to check out this page https://developers.google.com/maps/documentation/roads/snap

The response from that API call with the data you've already gotten from the lines drawn should give you the JSON data you need to map your path to the roads. This might not be the most elegant solution seeing as you might need to add a button or something to calculate the route to roads or something similar.

Alternatively you might be able to send out the API call after you have two points and have the map update after every line segment is placed. That would require a lot of API calls though. Hope that helps!

Upvotes: 1

Related Questions