Add info window to the destination marker from a route

Question

I want to add an info window to the final destination of a route. I searched the net but found that to add an info window I must create a new object. Note that I have a static starting point and the end point is dynamically taken it's latitude/longitude from database. So all I want to have is an info window with custom text appeared when the B icon, the end point is clicked.

This example is pretty similar with my situation: http://jsfiddle.net/gHK7s/2/

var directionsDisplay = new google.maps.DirectionsRenderer({
    draggable: true
});

Hope you guys can help me out with this.Thank you.

Felipe Pereira · Accepted Answer · 2014-11-07T14:54:35.933

2

Here you have a working fiddle based on the one you post, but with the modifications to add a marker at the end of the route.

As stated in the other answer, one of the modifications needed is to add the option to suppress the route markers

var directionsDisplay = new google.maps.DirectionsRenderer({ draggable: true, suppressMarkers: true });

Then you have to add the marker at the end, you can use these two functions:

function showDestinationMarker(directionResult) {
    var marker = new google.maps.Marker({
      position: directionResult.routes[0].legs[0].end_location,
      map: map
    });
    attachMarkerText(marker, "The end.");
    markerArray[0] = marker;
}

function attachMarkerText(marker, text) {
  google.maps.event.addListener(marker, 'click', function() {
    // Open an info window when the marker is clicked on,
    // containing the text of the step.
    stepDisplay.setContent(text);
    stepDisplay.open(map, marker);
  });
}

edited Nov 07 '14 at 14:54

answered Nov 06 '14 at 14:02

Felipe Pereira

11,410
4
41
45

I focused on this to answer "all I want to have is an info window with custom text appeared when the B icon, the end point is clicked", could be that my answer isn't so clear – Felipe Pereira Nov 06 '14 at 18:09
This adds a marker to each route step and attaches an infoWindow to each of them. This doesn't add an infoWindow/Marker to the start or end point. – MrUpsidown Nov 06 '14 at 23:29
`myRoute.steps` contains only the start location and the next steps but **not** the end location. Further to that, adding your own marker at the end location can be easily achieved without that loop (the Service response contains the `end_location`) but **first** you have to use `suppressMarkers` as stated in my answer, otherwise you'll end up with 2 markers at the end location. Got it? – MrUpsidown Nov 07 '14 at 08:28
@MrUpsidown Updated the answer, thanks for the "Got it?", it make me think.., now my answer looks better – Felipe Pereira Nov 07 '14 at 14:56
1

Yes! That works now ;-) +1 for the complete answer and example. @user3759547 If you need the same markers, have a look here: http://stackoverflow.com/questions/17746740/google-map-icons-with-visualrefresh but as a **side node**: this is **undocumented** and the [Charts / infographics API](https://developers.google.com/chart/infographics/docs/dynamic_icons) has been deprecated since over 2 years... so use them at your own risks! – MrUpsidown Nov 07 '14 at 17:10
Hi, sorry for my very late reply but health problems occurred suddenly. Hopefully I am ok now, will look at your suggestions and customize them to my needs. Thank you guys ! – user3759547 Nov 29 '14 at 15:43

score 1 · Answer 2 · edited May 23 '17 at 12:05

1

Check this https://stackoverflow.com/a/22639746/1238965

The key is to use suppressMarkers in the DirectionsRenderer:

directionsDisplay = new google.maps.DirectionsRenderer({
    suppressMarkers: true
});

Then add your own markers at the start and destination, and your custom infoWindow at the destination.

edited May 23 '17 at 12:05

Community

1
1

answered Nov 06 '14 at 16:53

MrUpsidown

21,592
15
77
131

Add info window to the destination marker from a route

2 Answers2