I am developing tracking web view of delivery app using react-google-maps (https://tomchentw.github.io/react-google-maps/). I need to customize the icon of the waypoints marker. I already search in google and integrate to my codes but unfortunately none worked. Data are from api response.
Here's my code.
const TrackingMap = compose(
withProps({
googleMapURL: "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=3.exp&libraries=geometry,drawing,places",
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: '700px', width:'100%' }} />,
mapElement: <div style={{ height: '100%' }} />,
}),
withScriptjs,
withGoogleMap,
lifecycle({
componentDidMount() {
let destinationLat, destinationLng, pickupLat, pickupLng;
var waypts = [];
var wayptsMarker = [];
const DirectionsService = new google.maps.DirectionsService();
for (let i = 0; i < points.length; i++) {
if (i < points.length-1 ) {
waypts.push({
location: new google.maps.LatLng(parseFloat(points[i].destination_latutude), parseFloat(points[i].destination_longitude)),
stopover: true,
});
}
if (i == 0) {
pickupLat = parseFloat(points[i].pickup_latutude)
pickupLng = parseFloat(points[i].pickup_longitude)
}
if (i == points.length-1) {
destinationLat = parseFloat(points[i].destination_latutude);
destinationLng = parseFloat(points[i].destination_longitude);
}
}
DirectionsService.route({
origin: new google.maps.LatLng(parseFloat(bookingDetails.rider_latitude), parseFloat(bookingDetails.rider_longitude)),
destination: new google.maps.LatLng(destinationLat, destinationLng),
waypoints: waypts,
travelMode: google.maps.TravelMode.DRIVING,
optimizeWaypoints: true,
}, (result, status) => {
if (status === google.maps.DirectionsStatus.OK) {
this.setState({
directions: result,
});
} else {
alert(`error fetching directions ${result}`);
}
});
}
})
)(props =>
<GoogleMap
defaultZoom={7}
defaultCenter={{ lat: parseFloat(bookingDetails.rider_latitude), lng: parseFloat(bookingDetails.rider_longitude) }}
>
{props.directions &&
<DirectionsRenderer
suppressMarkers= {true}
directions={props.directions}
geodesic={true}
options={{
polylineOptions: {
strokeOpacity: 1.0,
strokeColor: '#F36629',
strokeWeight: 6,
},
}}
/>
}
</GoogleMap>
);
I see that you are using suppressMarkers in your DirectionsRenderer object but to properly use it, you need to put it inside the options property. Setting it to true removes all the default markers(origin, waypoints and destination). You can then use Marker object to put markers on these positions. Since Waypoints is in array, you can loop through this array using .map and put a Marker object with icon property. This will change and set all your Waypoints marker with the icon value.
Here's a code snippet:
<GoogleMap
defaultCenter={{ lat: 40.756795, lng: -73.954298 }}
defaultZoom={13}
>
{this.state.directions != null && (
<DirectionsRenderer
directions={this.state.directions}
options={{ suppressMarkers: true }}
/>
)}
<Marker position={this.state.origin} />
<Marker position={this.state.dest} />
{this.state.waypts.map(waypt => (
<Marker
position={{ lat: waypt.location.lat, lng: waypt.location.lng }}
icon={'http://maps.google.com/mapfiles/kml/paddle/blu-blank.png'}
label={'W'}
/>
))}
</GoogleMap>
Here's a sample code. Put your API key in the index.js file for the code to work.
Related
I tried to show different origin and destination,but it's showing one only.In this code origin and destination are in array and loop an array dynamically it takes only one index info.
render(){
let DirectionsComponent;
if(this.state.trackData.length>0){
debugger
console.log(this.state.trackData)
const da = this.state.trackData
DirectionsComponent = compose(
withProps({
googleMapURL: "https://maps.googleapis.com/maps/api/js?key=",
loadingElement: <div style={{ height: `400px` }} />,
containerElement: <div style={{ width: `100%` }} />,
mapElement: <div style={{height: `600px`, width: `600px` }} />,
}),
withScriptjs,
withGoogleMap,
lifecycle({
componentDidMount(){
debugger
console.log(da.length)
for(let i=0;i<da.length;i++){
const waypoints = da[i].map(p=>({
location: {lat: parseFloat(p.PositionLat), lng:parseFloat(p.PositionLong)},
stopover: true
}))
const origin = waypoints.shift().location
const destination = waypoints.pop().location
const DirectionsService = new window.google.maps.DirectionsService();
DirectionsService.route({
origin: origin,
destination: destination,
travelMode: window.google.maps.TravelMode.DRIVING,
waypoints: waypoints
},(result, status) =>{
if (status === window.google.maps.DirectionsStatus.OK){
this.setState({
directions: {...result},
markers: true,
})
}else{
console.error(`error fetching directions ${result}`);
}
});
}
}
})
)(props=>
<GoogleMap defaultZoom={20} >{props.directions && <DirectionsRenderer directions={props.directions}
// suppressMarkers={props.markers}
/>
}
</GoogleMap>);
}
sorry for my english and thank you
Do we have any way to show current location icon in google maps by using react google maps
I could not find any such props for showing current location icon in the documentation Documtation_link.
here is my component i just need to show user current location icon
const googleMapCard= compose(
withProps({
googleMapURL:
"https://maps.googleapis.com/maps/api/js?key=-----------,
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `400px` }} />,
mapElement: <div style={{ height: `100%` }} />
}),
lifecycle({
componentWillMount() {
const refs = {};
this.setState({
bounds: null,
markers: [],
onMapMounted: ref => {
refs.map = ref;
},
onBoundsChanged: () => {
this.setState({
bounds: refs.map.getBounds(),
center: refs.map.getCenter()
});
},
onSearchBoxMounted: ref => {
refs.searchBox = ref;
},
onPlacesChanged: onChange => {
const places = refs.searchBox.getPlaces();
const bounds = new window.google.maps.LatLngBounds();
}
});
}
}),
withScriptjs,
withGoogleMap
)(props => (
<GoogleMap
onClick={e => {
props.onChange([e.latLng.lng(), e.latLng.lat()]);
}}
clickableIcons={true}
defaultZoom={8}
center={{ lat: props.value[1], lng: props.value[0] }}
defaultCenter={{ lat: props.value[1], lng: props.value[0] }}
ref={props.onMapMounted}
>
<SearchBox
ref={props.onSearchBoxMounted}
// bounds={props.bounds}
controlPosition={window.google.maps.ControlPosition.TOP_LEFT}
onPlacesChanged={() => {
props.onPlacesChanged(props.onChange);
}}
>
<input
type="text"
/>
</SearchBox>
<Marker position={{ lat: props.value[1], lng: props.value[0] }} />
)}
</GoogleMap>
));
You can use the Geolocation api.
See: https://developers.google.com/maps/documentation/javascript/geolocation
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
this.setState({ownPosition: pos})
}
It doesn't have anything to do with react-google-maps, it's a native browser api
Simpler way to write navigator-safe coordinate access, using native Geolocation Api.
navigator?.geolocation.getCurrentPosition(({coords: {latitude: lat, longitude: lng}}) => {
const pos = {lat, lng}
this.setState({currentPosition: pos})
})
This uses:
?. null access check - Read More
Destructuring
Alias
=> lambda arrow
This is probably going to be a stupidly simple react question but please bear with me.
I am trying to run a react-google-maps with multiple markers with info windows. Here is the code:
const MapWithADirectionsRenderer = compose(
withProps({
googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyDf-yIqxErTkbWzKhLox7nAANnrfDIY190&libraries=geometry,drawing,places",
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `800px` }} />,
mapElement: <div style={{ height: `100%` }} />,
}),
withStateHandlers(() => ({
isOpen: false,
}), {
onToggleOpen: ({ isOpen }) => () => ({
isOpen: !isOpen,
})
}),
withScriptjs,
withGoogleMap,
})
)(props =>
<GoogleMap
defaultZoom={13}
defaultCenter={new google.maps.LatLng(42.357064, -71.062577)}
>
<Marker
position={{ lat: 42.3381437, lng: -71.0475773 }}
onClick={props.onToggleOpen}
>
{props.isOpen && <InfoWindow onCloseClick={props.onToggleOpen}>
<h3>South Boston</h3>
</InfoWindow>}
</Marker>
<Marker
position={{ lat: 42.3875968, lng: -71.0994968 }}
onClick={props.onToggleOpen}
>
{props.isOpen && <InfoWindow onCloseClick={props.onToggleOpen}>
<h3>Somervil</h3>
</InfoWindow>}
</Marker>
{props.directions && <DirectionsRenderer directions={props.directions} />}
</GoogleMap>
);
When I click one of the markers, the info windows for all the markers toggle open. How do I just toggle open the info window of the marker I click?
I would suggest to introduce a component:
class MarkerWithInfoWindow extends React.Component {
constructor() {
super();
this.state = {
isOpen: false
}
this.onToggleOpen = this.onToggleOpen.bind(this);
}
onToggleOpen() {
this.setState({
isOpen: !this.state.isOpen
});
}
render() {
return (<Marker
position={this.props.position}
onClick={this.onToggleOpen}>
{this.state.isOpen && <InfoWindow onCloseClick={this.onToggleOpen}>
<h3>{this.props.content}</h3>
</InfoWindow>}
</Marker>)
}
}
to control info window per marker via MarkerWithInfoWindow state:
<GoogleMap
defaultZoom={13}
defaultCenter={new google.maps.LatLng(42.357064, -71.062577)}>
<MarkerWithInfoWindow position={{ lat: 42.3381437, lng: -71.0475773 }} content="South Boston" />
<MarkerWithInfoWindow position={{ lat: 42.3875968, lng: -71.0994968 }} content="Somervil" />
</GoogleMap>
Demo
How to change defaultCenter in react-google-maps ?
I need to find my geolocation and change default values lat and lng.
import React from "react";
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps";
const getLocation = () =>{
const pos = {};
const geolocation = navigator.geolocation;
if (geolocation) {
geolocation.getCurrentPosition(findLocal, showEror);
}
function findLocal(position){
pos.lat = position.coords.latitude;
pos.lng = position.coords.longitude;
}
function showEror(){console.log(Error)}
return pos;
};
const myLocation = getLocation(); // object has lat and lng
I need to transfer my data to the component MapWithAMarker next: Сenter={myLocation} and Marker position={myLocation}
class GoogleMapCenter extends React.Component{
render(){
const MapWithAMarker = withScriptjs(withGoogleMap(props =>
<GoogleMap
defaultZoom={10}
defaultCenter={{ lat: -34.397, lng: 150.644 }}>
{props.isMarkerShown && <Marker position={{ lat: -34.397, lng: 150.644 }} />}
</GoogleMap>
));
return(
<MapWithAMarker
isMarkerShown
googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp"
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `400px` }} />}
mapElement={<div style={{ height: `100%` }} />}
/>
)
}
}
export default GoogleMapCenter;
If I use this.props, it does not work.
<MapWithAMarker
center={this.props.myLocation}
position={this.props.myLocation}
isMarkerShown
googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp"
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `400px` }} />}
mapElement={<div style={{ height: `100%` }} />}
/>
or
<GoogleMap
defaultZoom={10}
defaultCenter={this.props.myLocation}>
{props.isMarkerShown && <Marker position={this.props.myLocation} />}
</GoogleMap>
Default properties like defaultCenter could only be set as initial state, center property could be used instead to re-render (center) the map.
The following example demonstrates how to center the map based on current location
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
currentLatLng: {
lat: 0,
lng: 0
},
isMarkerShown: false
}
}
showCurrentLocation = () => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
position => {
this.setState(prevState => ({
currentLatLng: {
...prevState.currentLatLng,
lat: position.coords.latitude,
lng: position.coords.longitude
},
isMarkerShown: true
}))
}
)
} else {
error => console.log(error)
}
}
componentDidMount() {
this.showCurrentLocation()
}
render() {
return (
<div>
<MapWithAMarker
isMarkerShown={this.state.isMarkerShown}
currentLocation={this.state.currentLatLng} />
</div>
);
}
}
where
const MapWithAMarker = compose(
withProps({
googleMapURL: "https://maps.googleapis.com/maps/api/js",
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `400px` }} />,
mapElement: <div style={{ height: `100%` }} />,
}),
withScriptjs,
withGoogleMap
)((props) =>
<GoogleMap
defaultZoom={8}
center={{ lat: props.currentLocation.lat, lng: props.currentLocation.lng }}
>
{props.isMarkerShown && <Marker position={{ lat: props.currentLocation.lat, lng: props.currentLocation.lng }} onClick={props.onMarkerClick} />}
</GoogleMap>
)
Demo (edit)
When using the react-google-maps library. I've found the DirectionsRenderer, but I only see an origin and a destination included as the options.
Is it possible to include multiple waypoints?
Google Maps API Docs
Yes, you can include multiple waypoints. As you see in the DirectionsRenderer sample, it uses const DirectionsService = new google.maps.DirectionsService(); . You can follow the sample on the DirectionsService doc on how to include the Waypoints in your request.
Here's a sample code snippet:
import React, { Component } from 'react';
import {
withGoogleMap,
GoogleMap,
DirectionsRenderer,
} from 'react-google-maps';
class Map extends Component {
state = {
directions: null,
};
componentDidMount() {
const directionsService = new google.maps.DirectionsService();
const origin = { lat: 40.756795, lng: -73.954298 };
const destination = { lat: 41.756795, lng: -78.954298 };
const waypt = [
{
location: { lat: 40.278022, lng: -76.899615 },
stopover: true,
},
{
location: { lat: 40.750216, lng: -78.922049 },
stopover: true,
},
];
directionsService.route(
{
origin: origin,
destination: destination,
waypoints: waypt,
travelMode: google.maps.TravelMode.DRIVING,
},
(result, status) => {
if (status === google.maps.DirectionsStatus.OK) {
this.setState({
directions: result,
});
} else {
console.error(`error fetching directions ${result}`);
}
}
);
}
render() {
const GoogleMapExample = withGoogleMap((props) => (
<GoogleMap
defaultCenter={{ lat: 40.756795, lng: -73.954298 }}
defaultZoom={13}
>
{this.state.directions && (
<DirectionsRenderer directions={this.state.directions} />
)}
</GoogleMap>
));
return (
<div>
<GoogleMapExample
containerElement={<div style={{ height: `500px`, width: '500px' }} />}
mapElement={<div style={{ height: `100%` }} />}
/>
</div>
);
}
}
export default Map;