Adding listener to multiple markers (Google maps API) to populate input fields of a form on click

Question

I have some data (set of documents) retrieved from (mongodb)database, and each document has (among other data) the longitude and latitude. so I use the long and the lat to display markers on a map. That works fine.

Now I would like to add Listener to each marker which would populate the input fields of a form with values when one clicks on it. I wrote JavaScript code to achieve that, but I am having " undefined " displayed in the form's fields instead of the expected values. When I alert (using alert() ) the values fetched from the database in the script, they are correct, but for some reasons which I ignore , I can't display then in the fields.

I would really appreciate if someone could help .

Thanks in advance!

Here is the script :

<script type="text/javascript">
    var lat = [];
    var lng = [];
    var status = [];
    var ipAddress = [];
    var height = [];
    var currentPower = [];
    var targetPower = [];
    var connectivity = [];
    var height = [];
    var emergencyMessage = [];
    var nominalMessage = [];
    //var iLiteID = [];
    var transmission = [];

    var latitude_tmp = 0;
    var longitude_tmp = 0;

    <c:forEach items="${iLiteList}" var="ilites" varStatus="status"> 
        latitude_tmp = (parseFloat("${ilites.latitude}"));
        longitude_tmp = (parseFloat("${ilites.longitude}"));
        lat.push((latitude_tmp));
        lng.push((longitude_tmp));
        status.push("${ilites.status}");
        ipAddress.push("${ilites.ipAddress}");
        height.push(parseFloat("${ilites.height}"));
        currentPower.push(parseFloat("${ilites.currentPower}"));
        targetPower.push(parseFloat("${ilites.targetPower}"));
        connectivity.push("${ilites.connectivity}");
        emergencyMessage.push("${ilites.emergencyMessage}");
        nominalMessage.push("${ilites.nominalMessage}");
        transmission.push("${ilites.transmission}");
    </c:forEach> 

    // Map creation 
         var myCenter=new google.maps.LatLng(48.2188,11.6248); 

        var map1 ;
        function initialize()
        {
             var mapProp = {
             center:myCenter,
             zoom:18,
            mapTypeId:google.maps.MapTypeId.ROADMAP
            };

            map1=new google.maps.Map(document.getElementById("googleMap1"),mapProp); 

            var marker = [] ;
            var latLng = []; 

            for(i = 0; i<lat.length; i ++){
                latLng [i] = new google.maps.LatLng(lat[i],lng[i]);
            }

            for (i = 0; i<lat.length; i ++){

                marker[i]=new google.maps.Marker({
                      position:latLng [i],
                      map: map1,
                      });
                marker[i].setMap(map1);

                google.maps.event.addListener(marker[i], 'click', function() {

                          document.getElementById("latitude").value=lat[i];
                          document.getElementById("status").value =status[i];
                          document.getElementById("ipAddress").value =ipAddress[i];
                          document.getElementById("longitude").value =lng[i];
                          document.getElementById("currentPower").value =currentPower[i];
                          document.getElementById("targetPower").value =targetPower[i];
                          document.getElementById("connectivity").value =connectivity[i];
                          document.getElementById("height").value =height[i];
                          document.getElementById("emergencyMessage").value =emergencyMessage[i];
                          document.getElementById("nominalMessage").value =nominalMessage[i];

                          if((transmission[i]).localeCompare("ON") == 0){
                              document.getElementById("transmission1").checked =true;
                          }else{
                              document.getElementById("transmission2").checked =true;
                          }

                        });
            }
        }

        google.maps.event.addDomListener(window, 'load', initialize);   
</script>

Here is the form :

<form class="form-inline" id="configurationUpdate" name="configurationUpdate">
    <div class="row" class=" display-panel" style="margin-right: 1px;">

        <div class="col-md-4 ">
            <div class="row inline_form">
                <label for="iliteID" class="col-sm-6  col-xs-12">I-Lite ID:</label>
                <input class="col-sm-6  col-xs-12" id="iLiteID" name="iLiteID">
            </div>
            <div class="row inline_form">
                <label for="latitude" class="col-sm-6  col-xs-12">Latitude (degree):</label>
                <input class="col-sm-6  col-xs-12" id="latitude" name="latitude">
            </div>
            <div class="row inline_form">
                <label for="target" class="col-sm-6  col-xs-12">Target Power (dBm):</label> 
                <input class="col-sm-6  col-xs-12" id="targetPower" name="targetPower">
            </div>
            <div class="row inline_form">
                <label for="status" class="col-sm-6  col-xs-12">Status:</label>
                <input class="col-sm-6  col-xs-12" id="status" name="status">
            </div>
            <div class="row inline_form">
                <label for="nominalMessage" class="col-sm-6  col-xs-12">Nominal Message:</label>
                <input class="col-sm-6  col-xs-12" name="nominalMessage" id="nominalMessage" placeholder="Enter message here">
            </div>
        </div>
        <div class="col-md-4">
            <div class="row inline_form">
                <label for="ipAddres" class="col-sm-6  col-xs-12">IP address:</label>
                <input class="col-sm-6  col-xs-12" id="ipAddress" name="ipAddress">
            </div>
            <div class="row inline_form">
                <label for="longitude" class="col-sm-6  col-xs-12">Longitude(degree):</label>
                <input class="col-sm-6  col-xs-12" id="longitude" name="longitude">
            </div>
            <div class="row inline_form">
                <label for="currentPower" class="col-sm-6  col-xs-12">Current Power(dBm):</label>
                <input class="col-sm-6  col-xs-12" id="currentPower" name="currentPower">
            </div>
            <div class="row inline_form">
                <label class="col-sm-6  col-xs-12" for="transmission">Transmission:</label>
                <label class="radio-inline col-sm-3  col-xs-6"><input type="radio" id="transmission1" name="transmission"  value = "ON"checked>ON</label>
                <label class="radio-inline col-sm-offset-9  col-xs-offset-6"><input type="radio" id="transmission2" name="transmission" value = "OFF">OFF</label>   
            </div>
            <div class="row inline_form">
                <label for="emergencyMessage" class="col-sm-6  col-xs-12">Emergency Message:</label>
                <input class="col-sm-6  col-xs-12" name="emergencyMessage"id="emergencyMessage" placeholder="Enter message here">
            </div>
        </div>
        <div class="col-md-4 inline_form">
            <div class="row">
                <label for="connectivity" class="col-sm-6  col-xs-12"> Connectivity:</label>
                <input class="col-sm-6  col-xs-12" id="connectivity" name="connectivity" >
            </div>
            <div class="row inline_form">
                <label for="height" class="col-sm-6  col-xs-12">Height (m) :</label>
                <input class="col-sm-6  col-xs-12" id="height" name="height" type="number" >
            </div>
        </div>
    </div>

    <div class="row">

        <div class="btn-group pull-right">

            <button class="col-md-offset-10 btn  btn-default updateConfBtn" id="updateConfBtn"><b>Update Configuration</b> </button>                                
        </div>

    </div>
</form>

Error_Message

Answer 1

When the loop completes i is left at marker.length (past the end of your arrays). On option would be to use function closure on the i variable as demonstrated in this similar question Google Maps JS API v3 - Simple Multiple Marker Example :

google.maps.event.addListener(marker[i], 'click', (function(i) {
return function() {

  document.getElementById("latitude").value = lat[i];
  document.getElementById("status").value = status[i];
  document.getElementById("ipAddress").value = ipAddress[i];
  document.getElementById("longitude").value = lng[i];
  document.getElementById("currentPower").value = currentPower[i];
  document.getElementById("targetPower").value = targetPower[i];
  document.getElementById("connectivity").value = connectivity[i];
  document.getElementById("height").value = height[i];
  document.getElementById("emergencyMessage").value = emergencyMessage[i];
  document.getElementById("nominalMessage").value = nominalMessage[i];

  if ((transmission[i]).localeCompare("ON") == 0) {
    document.getElementById("transmission1").checked = true;
  } else {
    document.getElementById("transmission2").checked = true;
  }
}}(i)));

proof of concept fiddle

code snippet:

 // Map creation var myCenter = new google.maps.LatLng(48.2188, 11.6248); var map1; function initialize() { var lat = []; var lng = []; var status = []; var ipAddress = []; var height = []; var currentPower = []; var targetPower = []; var connectivity = []; var height = []; var emergencyMessage = []; var nominalMessage = []; //var iLiteID = []; var transmission = []; var latitude_tmp = 0; var longitude_tmp = 0; latitude_tmp = 48.219297; longitude_tmp = 11.623927; lat.push((latitude_tmp)); lng.push((longitude_tmp)); status.push("stat"); ipAddress.push("192.168.0.1"); height.push(parseFloat("3.14")); currentPower.push(parseFloat("10")); targetPower.push(parseFloat("12")); connectivity.push("conn"); emergencyMessage.push("emergencyMessage"); nominalMessage.push("nominalMessage"); transmission.push("transmission"); latitude_tmp = 48.219472; longitude_tmp = 11.625102; lat.push((latitude_tmp)); lng.push((longitude_tmp)); status.push("stat"); ipAddress.push("192.168.0.1"); height.push(parseFloat("3.14")); currentPower.push(parseFloat("10")); targetPower.push(parseFloat("12")); connectivity.push("conn"); emergencyMessage.push("emergencyMessage"); nominalMessage.push("nominalMessage"); transmission.push("transmission"); var mapProp = { center: myCenter, zoom: 18, mapTypeId: google.maps.MapTypeId.ROADMAP }; map1 = new google.maps.Map(document.getElementById("googleMap1"), mapProp); google.maps.event.addListener(map1, 'click', function(evt) { document.getElementById('info').innerHTML += evt.latLng.toUrlValue(6) + "<br>"; }); var marker = []; var latLng = []; for (i = 0; i < lat.length; i++) { latLng[i] = new google.maps.LatLng(lat[i], lng[i]); } for (i = 0; i < lat.length; i++) { marker[i] = new google.maps.Marker({ position: latLng[i], map: map1, }); marker[i].setMap(map1); google.maps.event.addListener(marker[i], 'click', (function(i) { return function() { document.getElementById("latitude").value = lat[i]; document.getElementById("status").value = status[i]; document.getElementById("ipAddress").value = ipAddress[i]; document.getElementById("longitude").value = lng[i]; document.getElementById("currentPower").value = currentPower[i]; document.getElementById("targetPower").value = targetPower[i]; document.getElementById("connectivity").value = connectivity[i]; document.getElementById("height").value = height[i]; document.getElementById("emergencyMessage").value = emergencyMessage[i]; document.getElementById("nominalMessage").value = nominalMessage[i]; if ((transmission[i]).localeCompare("ON") == 0) { document.getElementById("transmission1").checked = true; } else { document.getElementById("transmission2").checked = true; } } }(i))); } } google.maps.event.addDomListener(window, 'load', initialize); 

 html, body, #googleMap1 { height: 100%; width: 100%; margin: 0px; padding: 0px } 

 <script src="https://maps.googleapis.com/maps/api/js"></script> <form class="form-inline" id="configurationUpdate" name="configurationUpdate"> <div class="row" class=" display-panel" style="margin-right: 1px;"> <div class="col-md-4 "> <div class="row inline_form"> <label for="iliteID" class="col-sm-6 col-xs-12">I-Lite ID:</label> <input class="col-sm-6 col-xs-12" id="iLiteID" name="iLiteID"> </div> <div class="row inline_form"> <label for="latitude" class="col-sm-6 col-xs-12">Latitude (degree):</label> <input class="col-sm-6 col-xs-12" id="latitude" name="latitude"> </div> <div class="row inline_form"> <label for="target" class="col-sm-6 col-xs-12">Target Power (dBm):</label> <input class="col-sm-6 col-xs-12" id="targetPower" name="targetPower"> </div> <div class="row inline_form"> <label for="status" class="col-sm-6 col-xs-12">Status:</label> <input class="col-sm-6 col-xs-12" id="status" name="status"> </div> <div class="row inline_form"> <label for="nominalMessage" class="col-sm-6 col-xs-12">Nominal Message:</label> <input class="col-sm-6 col-xs-12" name="nominalMessage" id="nominalMessage" placeholder="Enter message here"> </div> </div> <div class="col-md-4"> <div class="row inline_form"> <label for="ipAddres" class="col-sm-6 col-xs-12">IP address:</label> <input class="col-sm-6 col-xs-12" id="ipAddress" name="ipAddress"> </div> <div class="row inline_form"> <label for="longitude" class="col-sm-6 col-xs-12">Longitude(degree):</label> <input class="col-sm-6 col-xs-12" id="longitude" name="longitude"> </div> <div class="row inline_form"> <label for="currentPower" class="col-sm-6 col-xs-12">Current Power(dBm):</label> <input class="col-sm-6 col-xs-12" id="currentPower" name="currentPower"> </div> <div class="row inline_form"> <label class="col-sm-6 col-xs-12" for="transmission">Transmission:</label> <label class="radio-inline col-sm-3 col-xs-6"> <input type="radio" id="transmission1" name="transmission" value="ON" checked>ON</label> <label class="radio-inline col-sm-offset-9 col-xs-offset-6"> <input type="radio" id="transmission2" name="transmission" value="OFF">OFF</label> </div> <div class="row inline_form"> <label for="emergencyMessage" class="col-sm-6 col-xs-12">Emergency Message:</label> <input class="col-sm-6 col-xs-12" name="emergencyMessage" id="emergencyMessage" placeholder="Enter message here"> </div> </div> <div class="col-md-4 inline_form"> <div class="row"> <label for="connectivity" class="col-sm-6 col-xs-12">Connectivity:</label> <input class="col-sm-6 col-xs-12" id="connectivity" name="connectivity"> </div> <div class="row inline_form"> <label for="height" class="col-sm-6 col-xs-12">Height (m) :</label> <input class="col-sm-6 col-xs-12" id="height" name="height" type="number"> </div> </div> </div> <div class="row"> <div class="btn-group pull-right"> <button class="col-md-offset-10 btn btn-default updateConfBtn" id="updateConfBtn"><b>Update Configuration</b> </button> </div> </div> </form> <div id="info"></div> <div id="googleMap1"></div>