How to add custom markers using google maps directions api in react js

Question

Tech Stack - Google Map Directions Api, React JS, etc.

Problem Statement - Using google maps direction Api's i am drawing 3 pins i.e. origin, waypoints and destination. I am able to plot all these of these but unable to add custom markers to each of these. Any help/suggestion shall be really appreciated: -

Code Snippet: -

import React, { Component } from "react";
import {
    withGoogleMap,
    withScriptjs,
    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, icon: 'https://toppng.com/uploads/preview/map-marker-icon-600x-map-marker-11562939743ayfahlvygl.png' };
        const destination = { lat: 41.756795, lng: -78.954298, icon: 'https://toppng.com/uploads/preview/map-marker-icon-600x-map-marker-11562939743ayfahlvygl.png' };

   directionsService.route({
            origin: origin,
            destination: destination,
            waypoints: [{
                location: new google.maps.LatLng(42.756795, -78.954298, 'https://toppng.com/uploads/preview/map-marker-icon-600x-map-marker-11562939743ayfahlvygl.png'),
                stopover: false
            }],
            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}
            >
                <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;

Thanks

score 1 · Answer 1 · answered May 28 '21 at 05:45

1

react-google-maps has a Marker component that you can use.

<GoogleMap
  defaultCenter={{ lat: 40.756795, lng: -73.954298 }}
  defaultZoom={13}
>
  <DirectionsRenderer
    directions={this.state.directions}
  />
  <Marker location={{ lat: x, lng: y }} />
</GoogleMap>

answered May 28 '21 at 05:45

Will Walsh

1,799
1
6
15

Thanks Will for your answer. Can you please help on how do i customize the icon of the marker example for origin we need to show 'https://toppng.com/uploads/preview/map-marker-icon-600x-map-marker-11562939743ayfahlvygl.png'? – F-Developer May 28 '21 at 05:51
If you go to the link on `Marker` in the answer, you'll find all the props. I believe there is an `icon` property, which you should be able to assign that image to. – Will Walsh May 28 '21 at 05:56
render() { const GoogleMapExample = withGoogleMap(props => ( )); – F-Developer May 28 '21 at 06:32
i updated with the above code but did not work, please help on the same – F-Developer May 28 '21 at 06:32
{ marker_arr.map((item, i) => ( )) } – F-Developer May 28 '21 at 10:12
Markers are visible now using the above code, but i see the default google marker also visible example 'A' 'B'. How can i hide/remove this? – F-Developer May 28 '21 at 10:14

How to add custom markers using google maps directions api in react js

1 Answers1