componentRestrictions: [country: 'us']
, and placed in getPlacePredictions
, but is not working.
import React, { Component } from "react";
import {
withGoogleMap,
withScriptjs,
GoogleMap,
DirectionsRenderer,
} from "react-google-maps";
import { Polyline } from 'react-google-maps';
class Map extends Component {
constructor(props) {
super(props);
this.state = {
directions: null,
error: null,
}
}
componentWillReceiveProps(){
this.getDirection()
}
getDirection(){
const directionsRenderer = new google.maps.DirectionsRenderer();
const directionsService = new google.maps.DirectionsService();
const origin = this.props.start_lat_lng;
const destination =this.props.end_lat_lng;
// console.log("propssssss: ",this.props)
directionsService.route(
{
origin: origin,
destination: destination,
travelMode: google.maps.TravelMode.DRIVING,
provideRouteAlternatives: true,
unitSystem: google.maps.UnitSystem.METRIC
},
(response, status) => {
if (status == google.maps.DirectionsStatus.OK) {
for (var i = 0; i < response.routes.length; i++) {
var directions = new google.maps.DirectionsRenderer();
this.setState({
directions: response,
routeIndex: i,
});
}
}
}
);
}
render() {
const ShowGoogleMap = withGoogleMap(props => (
<GoogleMap
defaultCenter={{ lat: 8.525335, lng: 76.939269 }}
defaultZoom={5}
>
<DirectionsRenderer
directions={this.state.directions}
/>
</GoogleMap>
));
return (
<div>
<ShowGoogleMap
containerElement={<div style={{ height: `300px`, width: "500px" }} />}
mapElement={<div style={{ height: `100%` }} />}
/>
</div>
);
}
}
export default Map;
Uncaught ReferenceError: google is not defined
at handleAutoComplete (index.js?df54:93)
Hello everybody. The repo of this project is unmaintained more than 3 years, and we had build new version https://www.npmjs.com/package/@react-google-maps/api
We had rewrite it to TypeScript, and updating it frequently: https://github.com/JustFly1984/react-google-maps-api/tree/master/packages/react-google-maps-api
You can enjoy autocomplete.
You can see our docs: https://react-google-maps-api-docs.netlify.app
Also a lot of examples: https://react-google-maps-api-gatsby-demo.netlify.app/ https://github.com/JustFly1984/react-google-maps-api/tree/master/packages/react-google-maps-api-gatsby-example/src/examples
The bundle size is much smaller: https://bundlephobia.com/result?p=@react-google-maps/api
Our Spectrum community: https://spectrum.chat/react-google-maps Our Slack channel: https://join.slack.com/t/react-google-maps-api/shared_invite/enQtODc5ODU1NTY5MzQ4LTBiNTYzZmY1YmVjYzJhZThkMGU0YzUwZjJkNGJmYjk4YjQyYjZhMDk2YThlZGEzNDc0M2RhNjBmMWE4ZTJiMjQ
Enjoy!
How do i make a basic React Application which has the following:
2 input fields:
Both of the above fields should have Google Maps search API integrated into them so that we are able to search for a particular location (with auto-complete)
Below these inputs there will be a Map displayed which will show us markers at the Source, Destination and the Route between the two locations.
https://maps.googleapis.com/maps/api/js?key=${siteSettings.googleMaps.apiKey}&map_ids=${siteSettings.googleMaps.mapID}&callback=initMap