Add Event listener for on('change') to Google Maps Info Window

Question

UPDATED:

I am adding markers and info windows to a google map based on database info.

In each of those Info windows I am adding a <select><option> ... </select> element from other info in the database.

What I can't get working is to have an handler called when the user selects an item from that list in an Info Window.

If the <select> element is outside the info window, then:

 $('#route').on('change', function(evt, params) {
       // The name selected
       alert($(this).attr('name'));
       // The value
                alert($(this).val());
 });

works fine. But once it's in the Info window, this of course no longer works because the info window isn't in the DOM.

The jQuery call returns a JSON Object with Name, Phone Number, etc. that I use to populate the InfoWindow. I use a persistent variable, activeDrivers that is an array of similarly formatted JSON objects to populate the <select> <option>s. I get no error on this code, but similarly, I get no results, either.

I've tried various ways to add the event listener to the map:

jQuery.getJSON(url, function(data) {
   var myLatLng = data.Location;
   var marker = new google.maps.Marker({
       position: myLatLng,
       map: map,
       animation: google.maps.Animation.DROP,
       title: data.Name,
       icon: icon
   });
   if(getType() == 'driver'){
       activeDrivers.push(data);
   }
   else {
       activeAttendees.push(data);
   }
   markers.push(marker);
   var contentString = '<div id="content">' +
      '<h1 id="firstHeading" class="firstHeading">' + data.Name + '<\/h1>' +
      '<div id="bodyContent">' +
      '<p>' + data.Address + ' ' + data.City + ', ' + data.State + '<\/p>' +
      '<p><a href=\"tel:"' + data.HomePhone + '">' + data.HomePhone + '<\/a><\/p><p>';
      if(data.hasOwnProperty('Notes')){
         contentString += '<strong>Notes: ' + data.Notes + '<\/strong><\/p>';
      }
      contentString += '<div><p>';
      if(getType() == 'attendee'){
          var selectDriver = '<select class=\'route\' name=\'' + data.id + '\'>';
          for(var x = 0; x < activeDrivers.length; x++){
               selectDriver += "<option value=\"" + activeDrivers[x].id + "\">" + activeDrivers[x].Name + "</option>";
          }
          selectDriver += "<\/select>";
          contentString += selectDriver;
      }
      contentString += '<\/div></div>';
      var infowindow = new google.maps.InfoWindow({
          content: contentString
      });
      marker.addListener('click', function() {
          infowindow.open(map, marker);
      });
      infowindow.addListener('domready', function() {
          $('#route').on('change', function(evt, params) {
            // The name 
            alert($(this).attr('name'));
            // The value
            alert($(this).val());
          });
      }); // end addListener
}); 

But so far, nothing seems to work.

I can use jQuery, if that helps.

Suggestions?

Answer 1

you need to add an event listener to the domready event on the infowindow.

This doesn't work for me, it doesn't look correct:

map.addListener(infowindow, 'domready', function() {
    $('#route').on('change', function(evt, params) {
         // The name 
         alert($(this).attr('name'));
         // The value
         alert($(this).val());
     });
}); // end addListener 

I used this:

google.maps.event.addListener(infowindow, 'domready', function() {
 $('#route').on('change', function(evt, params) {
    console.log($(this).val());
    calculateAndDisplayRoute(directionsService, directionsDisplay, $(this).val());
  });
}); // end addListener 

proof of concept fiddle

code snippet:

function initMap() {
  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer;
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: {
      lat: 41.85,
      lng: -87.65
    }
  });
  // Indianapolis, IN, USA (39.768403, -86.15806800000001)
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(39.768403, -86.158068),
    map: map
  });
  var infowindow = new google.maps.InfoWindow({
    content: '<select id="route"><option value="kingman, az ">Kingman</option><option value="barstow, ca ">Barstow</option><option value="san bernardino, ca ">San Bernardino</option>option value="los angeles, ca ">Los Angeles</option></select>'
  });
  marker.addListener('click', function(evt) {
    infowindow.open(map, marker);
  });
  google.maps.event.trigger(marker, 'click')
  google.maps.event.addListener(infowindow, 'domready', function() {
    $('#route').on('change', function(evt, params) {
      // The name 
      // alert($(this).attr('name'));
      // The value
      console.log($(this).val());
      calculateAndDisplayRoute(directionsService, directionsDisplay, $(this).val());
    });
  }); // end addListener 
  directionsDisplay.setMap(map);
  calculateAndDisplayRoute(directionsService, directionsDisplay);

  var onChangeHandler = function() {
    calculateAndDisplayRoute(directionsService, directionsDisplay);
  };
  document.getElementById('start').addEventListener('change', onChangeHandler);
  document.getElementById('end').addEventListener('change', onChangeHandler);
}

function calculateAndDisplayRoute(directionsService, directionsDisplay, end) {
  if (!end) end = document.getElementById('end').value
  directionsService.route({
    origin: document.getElementById('start').value,
    destination: end,
    travelMode: google.maps.TravelMode.DRIVING
  }, function(response, status) {
    if (status === google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}
google.maps.event.addDomListener(window, "load", initMap);

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto', 'sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="floating-panel">
  <b>Start: </b>
  <select id="start">
    <option value="chicago, il">Chicago</option>
    <option value="st louis, mo">St Louis</option>
    <option value="joplin, mo">Joplin, MO</option>
    <option value="oklahoma city, ok">Oklahoma City</option>
    <option value="amarillo, tx">Amarillo</option>
    <option value="gallup, nm">Gallup, NM</option>
    <option value="flagstaff, az">Flagstaff, AZ</option>
    <option value="winona, az">Winona</option>
    <option value="kingman, az">Kingman</option>
    <option value="barstow, ca">Barstow</option>
    <option value="san bernardino, ca">San Bernardino</option>
    <option value="los angeles, ca">Los Angeles</option>
  </select>
  <b>End: </b>
  <select id="end">
    <option value="chicago, il">Chicago</option>
    <option value="st louis, mo" selected="selected">St Louis</option>
    <option value="joplin, mo">Joplin, MO</option>
    <option value="oklahoma city, ok">Oklahoma City</option>
    <option value="amarillo, tx">Amarillo</option>
    <option value="gallup, nm">Gallup, NM</option>
    <option value="flagstaff, az">Flagstaff, AZ</option>
    <option value="winona, az">Winona</option>
    <option value="kingman, az">Kingman</option>
    <option value="barstow, ca">Barstow</option>
    <option value="san bernardino, ca">San Bernardino</option>
    <option value="los angeles, ca">Los Angeles</option>
  </select>
</div>
<div id="map"></div>