I'm new with maps and I need to implement a route and also get the distance. I'm using react-google-map s API and I have found this way to show the map, and the route.
It is the first time that I build a component like this and now I don't know how to access the data that is outside the class component. Basically, I would like to add the data from the search box (coordinates) to the origin in the DirectionService.route, and also to get the distance. Do you know how can I access that data?
I've been reading that componentWillMount is being deprecated but it is the only way that I made it work, if you have any suggestions I'll be happy to try.
import React from 'react' import { compose, withProps, lifecycle } from 'recompose' import {withScriptjs, withGoogleMap, GoogleMap, DirectionsRenderer} from 'react-google-maps' const { StandaloneSearchBox } = require("react-google-maps/lib/components/places/StandaloneSearchBox"); const DirectionsComponent = compose( withProps({ googleMapURL: "https://maps.googleapis.com/maps/api/js?key='yourkey'&libraries=geometry,drawing,places", loadingElement: <div style={{ height: `400px` }} />, containerElement: <div style={{ width: `100%` }} />, mapElement: <div style={{height: `600px`, width: `600px` }} />, }), withScriptjs, withGoogleMap, lifecycle({ componentWillMount() { const refs = {}; this.setState({ places: [], onSearchBoxMounted: ref => { refs.searchBox = ref; }, onPlacesChanged: () => { const places = refs.searchBox.getPlaces(); console.log(places) this.setState({ places }); } }); }, componentDidMount() { const google = window.google const DirectionsService = new google.maps.DirectionsService(); DirectionsService.route({ origin: new google.maps.LatLng(41.3851, -2.1734), destination: new google.maps.LatLng(40.4165, -3.70256), travelMode: google.maps.TravelMode.DRIVING, }, (result, status) => { console.log(result) if (status === google.maps.DirectionsStatus.OK) { this.setState({ directions: {...result}, markers: true }) const distance = result.routes[0].legs[0].distance['text'] console.log(distance) } else { console.error(`error fetching directions ${result}`); } }); } }) )(props => <div data-standalone-searchbox=""> <StandaloneSearchBox ref={props.onSearchBoxMounted} bounds={props.bounds} onPlacesChanged={props.onPlacesChanged} > <input type="text" placeholder="Enter your destination" style={{ boxSizing: `border-box`, border: `1px solid transparent`, width: `240px`, height: `32px`, padding: `0 12px`, borderRadius: `3px`, boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`, fontSize: `14px`, outline: `none`, textOverflow: `ellipses` }} /> </StandaloneSearchBox> <ol> {props.places.map( ({ place_id, formatted_address, geometry: { location } }) => ( <li key={place_id}> {formatted_address} {" at "} ({location.lat()}, {location.lng()}) </li> ) )} </ol> <GoogleMap defaultZoom={3}> {props.directions && <DirectionsRenderer directions={props.directions} suppressMarkers={props.markers} />} </GoogleMap> </div> ); class MyMapComponent extends React.PureComponent { constructor(props) { super(props) console.log(props) this.state = { } } render() { return ( <div> <DirectionsComponent/> </div> ) } } export default MyMapComponent
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
First of, please remove the API key in your question and don't post it in public sites in the future to protect it.
I successfully coded your use case but I used the @react-google-maps/api since this is a complete re-write of the (sadly unmaintained) react-google-maps library. Then instead of componentWillMount
I used the OnLoad
callback used which is called when the map instance has loaded.
Please see the working sample code here and code snippet with inline comments below:
Index.js
import React, { Component } from "react";
import { render } from "react-dom";
import { LoadScript } from "@react-google-maps/api";
import Map from "./Map";
import "./style.css";
const lib = ["places"];
const key = ""; // PUT GMAP API KEY HERE
class App extends React.Component {
render() {
return (
<LoadScript googleMapsApiKey={key} libraries={lib}>
<Map />
</LoadScript>
);
}
}
render(<App />, document.getElementById("root"));
Map.js
/*global google*/
import ReactDOM from "react-dom";
import React from "react";
import {
GoogleMap,
StandaloneSearchBox,
DirectionsRenderer
} from "@react-google-maps/api";
const defaultLocation = { lat: 40.756795, lng: -73.954298 };
let destination = { lat: 41.756795, lng: -78.954298 };
let origin = { lat: 40.756795, lng: -73.954298 };
let directionsService;
class Map extends React.Component {
state = {
directions: null,
bounds: null
};
onMapLoad = map => {
directionsService = new google.maps.DirectionsService();
//load default origin and destination
this.changeDirection(origin, destination);
};
//function that is called when SearchBox has loaded and assigned ref to this.searchbox to get the searchbox object
onSBLoad = ref => {
this.searchBox = ref;
};
onPlacesChanged = () => {
//pass the new place location as the origin
this.changeDirection(
this.searchBox.getPlaces()[0].geometry.location,
destination
);
};
//function that is calling the directions service
changeDirection = (origin, destination) => {
directionsService.route(
{
origin: origin,
destination: destination,
travelMode: google.maps.TravelMode.DRIVING
},
(result, status) => {
if (status === google.maps.DirectionsStatus.OK) {
//changing the state of directions to the result of direction service
this.setState({
directions: result
});
} else {
console.error(`error fetching directions ${result}`);
}
}
);
};
render() {
return (
<div>
<div id="searchbox">
<StandaloneSearchBox
onLoad={this.onSBLoad}
onPlacesChanged={this.onPlacesChanged}
>
<input
type="text"
placeholder="Customized your placeholder"
style={{
boxSizing: `border-box`,
border: `1px solid transparent`,
width: `240px`,
height: `32px`,
padding: `0 12px`,
borderRadius: `3px`,
boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
fontSize: `14px`,
outline: `none`,
textOverflow: `ellipses`,
position: "absolute",
left: "50%",
marginLeft: "-120px"
}}
/>
</StandaloneSearchBox>
</div>
<br />
<div>
<GoogleMap
center={defaultLocation}
zoom={5}
onLoad={map => this.onMapLoad(map)}
mapContainerStyle={{ height: "400px", width: "800px" }}
>
{this.state.directions !== null && (
<DirectionsRenderer directions={this.state.directions} />
)}
</GoogleMap>
</div>
</div>
);
}
}
export default Map;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.