Hi i'm drawing a route here in my code between two markers. what i need to get done is adding a click event to those two markers and setting a info window to each marker. i searched on many websites couldn't find a solution. though it draws the route between markers cannot set a info window to each marker. Here is my Code...

                   function mapLocation() {
                        var directionsDisplay;
                        var directionsService = new google.maps.DirectionsService();
                        var map;

                        function initialize() {
                            directionsDisplay = new google.maps.DirectionsRenderer();
                            var chicago = new google.maps.LatLng(37.334818, -121.884886);
                            var mapOptions = {
                                zoom: 7,
                                center: chicago
                            };
                            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
                            directionsDisplay.setMap(map);
                            google.maps.event.addDomListener(document.getElementById('routebtn'), 'click', calcRoute);
                        }

                        function calcRoute() {
                            var start = new google.maps.LatLng(37.334818, -121.884886);
                            //var end = new google.maps.LatLng(38.334818, -181.884886);
                            var end = new google.maps.LatLng(37.441883, -122.143019);
                            var request = {
                                origin: start,
                                destination: end,
                                travelMode: google.maps.TravelMode.DRIVING
                            };
                            directionsService.route(request, function (response, status) {
                                if (status == google.maps.DirectionsStatus.OK) {
                                    directionsDisplay.setDirections(response);
                                    directionsDisplay.setMap(map);
                                } else {
                                    alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status);
                                }
                            });
                        }

                        google.maps.event.addDomListener(window, 'load', initialize);
                    }
                    mapLocation();

Hi i'm drawing a route here in my code between two markers. what i need to get done is adding a click event to those two markers and setting a info window to each marker. i searched on many websites couldn't find a solution. though it draws the route between markers cannot set a info window to each marker. Here is my Code...

                   function mapLocation() {
                        var directionsDisplay;
                        var directionsService = new google.maps.DirectionsService();
                        var map;

                        function initialize() {
                            directionsDisplay = new google.maps.DirectionsRenderer();
                            var chicago = new google.maps.LatLng(37.334818, -121.884886);
                            var mapOptions = {
                                zoom: 7,
                                center: chicago
                            };
                            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
                            directionsDisplay.setMap(map);
                            google.maps.event.addDomListener(document.getElementById('routebtn'), 'click', calcRoute);
                        }

                        function calcRoute() {
                            var start = new google.maps.LatLng(37.334818, -121.884886);
                            //var end = new google.maps.LatLng(38.334818, -181.884886);
                            var end = new google.maps.LatLng(37.441883, -122.143019);
                            var request = {
                                origin: start,
                                destination: end,
                                travelMode: google.maps.TravelMode.DRIVING
                            };
                            directionsService.route(request, function (response, status) {
                                if (status == google.maps.DirectionsStatus.OK) {
                                    directionsDisplay.setDirections(response);
                                    directionsDisplay.setMap(map);
                                } else {
                                    alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status);
                                }
                            });
                        }

                        google.maps.event.addDomListener(window, 'load', initialize);
                    }
                    mapLocation();

• javascript
• google-maps
• google-maps-api-3
• google-maps-markers

1 Answer 1

You can't just add a click listener with an InfoWindow. You need to use the {suppressMarkers} option to the DirectionsRenderer, then parse the information needed from the response to add your own markers.

Modified from my example at: http://www.geocodezip./v3_directions_custom_iconsC.html

code snippet:

function mapLocation() {
  var directionsDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;
  var infowindow;

  function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer({
      suppressMarkers: true
    });
    var chicago = new google.maps.LatLng(37.334818, -121.884886);
    var mapOptions = {
      zoom: 7,
      center: chicago
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    infowindow = new google.maps.InfoWindow();
    directionsDisplay.setMap(map);
    google.maps.event.addDomListener(document.getElementById('routebtn'), 'click', calcRoute);
  }

  function calcRoute() {
    var start = new google.maps.LatLng(37.334818, -121.884886);
    var end = new google.maps.LatLng(37.441883, -122.143019);
    var waypoint = {
      location: new google.maps.LatLng(37.432334, -121.899574)
    };
    var waypoint2 = {
      location: new google.maps.LatLng(37.54827, -121.988572)
    };
    var request = {
      origin: start,
      destination: end,
      waypoints: [waypoint, waypoint2],
      travelMode: google.maps.TravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
        directionsDisplay.setMap(map);

        var startLocation = new Object();
        var endLocation = new Object();
        var waypointLocations = [];

        // Display start and end markers for the route.
        var legs = response.routes[0].legs;
        for (i = 0; i < legs.length; i++) {
          if (i == 0) {
            startLocation.latlng = legs[i].start_location;
            startLocation.address = legs[i].start_address;
            // createMarker(legs[i].start_location, "start", legs[i].start_address, "green");
          }
          if (i != 0 && i != legs.length - 1) { 
            var waypoint = {};
            waypoint.latlng = legs[i].start_location;
            waypoint.address = legs[i].start_address;
            waypointLocations.push(waypoint);
          }
          if (i == legs.length - 1) {
            endLocation.latlng = legs[i].end_location;
            endLocation.address = legs[i].end_address;
          }
          var steps = legs[i].steps;
        }
        createMarker(endLocation.latlng, "end", "special text for end marker", "http://www.google./mapfiles/markerB.png")
        createMarker(startLocation.latlng, "start", "special text for start marker", "http://maps.gstatic./mapfiles/markers2/marker_greenA.png");
        for (var i = 0; i < waypointLocations.length; i++) {
          createMarker(waypointLocations[i].latlng, "waypoint " + i, "special text for waypoint marker " + i, "http://www.google./mapfiles/marker_yellow.png");
        }
      } else {
        alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status);
      }
    });
  }

  function createMarker(latlng, label, html, url) {
    var contentString = '<b>' + label + '</b><br>' + html;
    var marker = new google.maps.Marker({
      position: latlng,
      map: map,
      icon: url,
      title: label,
      zIndex: Math.round(latlng.lat() * -100000) << 5
    });

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent(contentString);
      infowindow.open(map, marker);
    });
  }
  google.maps.event.addDomListener(window, 'load', initialize);
}


// http://www.google./mapfiles/markerB.png


mapLocation();

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
}

<script src="https://maps.googleapis./maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<input id="routebtn" type="button" value="route" />
<div id="map-canvas"></div>