How to get Google Maps InfoWindow data into multiple HTML text boxes

Question

I am developing an app where you can click on the Google Maps marker pin and it will automatically populate the info window content into a text box. However, I can't seem to get the transfer of information working. I've searched extensively on trying to resolve this but so far no luck - especially since multiple text boxes are involved. I would appreciate any help please.

Here's the HTML code:

    <!-- Map -->
    <div id="mapDiv"></div><br />

    <!-- Destinations -->
    <div id="destination1">
        <label class="title">Destination 1:</label>
        <input id="dest-num1" type="text" name="dest1" size="50" />
    </div><br />

    <div id="destination2"> 
        <label class="title">Destination 2:</label>
        <input id="dest-num2" type="text" name="dest2" size="50" />
    </div><br />

Here's my Javascript:

    var map;
    function initMap(){
            google.maps.visualRefresh = true;

            var mapOptions = {
                center: new google.maps.LatLng(37.09948, -95.59307),
                zoom: 4,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var mapElement = document.getElementById('mapDiv');

            map = new google.maps.Map(mapElement, mapOptions);

            var markers = [
                ['BHM-Birmingham', 33.56243, -86.75413],
                ['HSV-Huntsville', 34.64033, -86.77569],
                ['PHX-Phoenix', 33.43727, -112.00779],
                ['TUS-Tucson', 32.11451, -110.93923]
            ];

            var infoWindowContent = [
                ['<div class="info_content">' + '<p>Birmingham, AL (BHM - Birmingham-Shuttlesworth Intl)</p>' + '</div>'],
                ['<div class="info_content">' + '<p>Huntsville, AL (HSV - Huntsville Intl)</p>' + '</div>'],
                ['<div class="info_content">' + '<p>Phoenix, AZ (PHX - Phoenix Sky Harbor Intl)</p>' + '</div>'],
                ['<div class="info_content">' + '<p>Tucson, AZ (TUS - Tucson Intl)</p>' + '</div>'],
            ];

            var infoWindow = new google.maps.InfoWindow(), marker, i;

            for(i=0; i < markers.length; i++){
                var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
                var image = 'images/airportIcon_red.png';
                var marker = new google.maps.Marker({
                    position: position,
                    map: map,
                    icon: image,
                    title: markers[i][0],
                    draggable: false,
                });

                google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        infoWindow.setContent(infoWindowContent[i][0]);
                        infoWindow.open(map, marker);
                        if (!"dest-num1".val()) {
                            document.getElementById("dest-num1").value = infoWindowContent;
                            if (!"dest-num2".val()) {
                                document.getElementById("dest-num2").value = infoWindowContent;
                                if (!"dest-num1".val() && !"dest-num2".val()) {
                                    alert ("One of the destination fields must be cleared before a new destination can be selected");
                                }
                            } 
                        }
                    }
                })(marker, i));
            }   
        }
    google.maps.event.addDomListener(window, 'load', initMap);

Thanks in advance for your help!

BTW - [your code as posted doesn't exhibit the issue you report](http://jsfiddle.net/h9zc4zbe/) — geocodezip, Mar 24 '15 at 02:00
@geocodezip: Sorry about that, I could only get the markers to show up and the debugger was telling me something was undefined when I tried to get the text fields to populate, but at the time I couldn't tell what. — Quinn, Mar 24 '15 at 03:54

score 1 · Accepted Answer · answered Mar 24 '15 at 02:18

You are using JQuery incorrectly:

if (!"dest-num1".val()) {
  document.getElementById("dest-num1").value = infoWindowContent;
  if (!"dest-num2".val()) {
    document.getElementById("dest-num2").value = infoWindowContent;
      if (!"dest-num1".val() && !"dest-num2".val()) {
        alert ("One of the destination fields must be cleared before a new destination can be selected");
      }
    } 
 }

Should be (notice the $(#...),val() vs. "dest-num1".val()):

if (!$("#dest-num1").val()) {
  document.getElementById("dest-num1").value = markers[i][0];
} else if (!$("#dest-num2").val()) {
  document.getElementById("dest-num2").value = markers[i][0];
} else {
  alert("One of the destination fields must be cleared before a new destination can be selected");
}

working fiddle

var map;

function initMap() {
  google.maps.visualRefresh = true;

  var mapOptions = {
    center: new google.maps.LatLng(37.09948, -95.59307),
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var mapElement = document.getElementById('mapDiv');

  map = new google.maps.Map(mapElement, mapOptions);

  var markers = [
    ['BHM-Birmingham', 33.56243, -86.75413],
    ['HSV-Huntsville', 34.64033, -86.77569],
    ['PHX-Phoenix', 33.43727, -112.00779],
    ['TUS-Tucson', 32.11451, -110.93923]
  ];

  var infoWindowContent = [
    ['<div class="info_content">' + '<p>Birmingham, AL (BHM - Birmingham-Shuttlesworth Intl)</p>' + '</div>'],
    ['<div class="info_content">' + '<p>Huntsville, AL (HSV - Huntsville Intl)</p>' + '</div>'],
    ['<div class="info_content">' + '<p>Phoenix, AZ (PHX - Phoenix Sky Harbor Intl)</p>' + '</div>'],
    ['<div class="info_content">' + '<p>Tucson, AZ (TUS - Tucson Intl)</p>' + '</div>'],
  ];

  var infoWindow = new google.maps.InfoWindow(),
    marker, i;

  for (i = 0; i < markers.length; i++) {
    var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
    // var image = 'images/airportIcon_red.png';
    var marker = new google.maps.Marker({
      position: position,
      map: map,
      // icon: image,
      title: markers[i][0],
      draggable: false,
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infoWindow.setContent(infoWindowContent[i][0]);
        infoWindow.open(map, marker);
        var value = $("#dest-num1").val();
        if (!$("#dest-num1").val()) {
          document.getElementById("dest-num1").value = markers[i][0];
        } else if (!$("#dest-num2").val()) {
          document.getElementById("dest-num2").value = markers[i][0];
        } else {
          alert("One of the destination fields must be cleared before a new destination can be selected");
        }
      }

    })(marker, i));
  }
}
google.maps.event.addDomListener(window, 'load', initMap);

html,
body,
#mapDiv {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<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>
<!-- Map -->
<div id="mapDiv"></div>
<br />
<!-- Destinations -->
<div id="destination1">
  <label class="title">Destination 1:</label>
  <input id="dest-num1" type="text" name="dest1" size="50" />
</div>
<br />
<div id="destination2">
  <label class="title">Destination 2:</label>
  <input id="dest-num2" type="text" name="dest2" size="50" />
</div>
<br />

Wow - all I can say is thank you so much for the detailed answer and snippets. I'm still quite new at javascript and jquery but can see now exactly where I made rookie mistakes. Many thanks again for your help! :) — Quinn, Mar 24 '15 at 03:52

How to get Google Maps InfoWindow data into multiple HTML text boxes

1 Answers1