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 :

Here is the form :


    

        
            
                I-Lite ID:
                
            
            
                Latitude (degree):
                
            
            
                Target Power (dBm): 
                
            
            
                Status:
                
            
            
                Nominal Message:
                
            
        
        
            
                IP address:
                
            
            
                Longitude(degree):
                
            
            
                Current Power(dBm):
                
            
            
                Transmission:
                ON
                OFF   
            
            
                Emergency Message:
                
            
        
        
            
                 Connectivity:
                
            
            
                Height (m) :

Error_Message

geocodezip · Accepted Answer

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



  

    
      
        I-Lite ID:
        
      
      
        Latitude (degree):
        
      
      
        Target Power (dBm):
        
      
      
        Status:
        
      
      
        Nominal Message:
        
      
    
    
      
        IP address:
        
      
      
        Longitude(degree):
        
      
      
        Current Power(dBm):
        
      
      
        Transmission:
        
          ON
        
          OFF
      
      
        Emergency Message:
        
      
    
    
      
        Connectivity:
        
      
      
        Height (m) :

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

Answers (1)

Related Questions