Как получить данные Google Maps InfoWindow в несколько текстовых полей HTML

Question

Я разрабатываю приложение, в котором вы можете щелкнуть по значку маркера Google Maps, и он автоматически заполнит содержимое информационного окна в текстовое поле. Однако я не могу заставить передачу информации работать. Я много раз искал попытку решить эту проблему, но пока не повезло - особенно, поскольку задействованы несколько текстовых полей. Буду признателен за любую помощь, пожалуйста.

Вот HTML код:

<!-- 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 /> 

Вот мой 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); 

Заранее спасибо за вашу помощь!

Answer 1

Вы используете JQuery неправильно:

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"); 
     } 
    } 
} 

Должно быть (обратите внимание на $ (# ...), Val() против "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 />