3 Replies Latest reply on Jan 2, 2018 12:35 PM by Laurent Matheo

    How to save data from the infowindow and save it in SQL server database

       

       

      I am making an application which needs auditing feature on the infowindow of markers in google maps. I have successfully added the details there but how can can I change the details there? I have seen examples in php and others but not asp.net webform with entity framework and SQL server. My script file is as such there needs to be a dropdown in the infowindow from database and values entered there needs to be changed whenever required and that values changed should reflect back in the SQL server database. How can I do so?  

       

      var clicked = false;
        window
      .onload = function initMap() { 
        var circle
      ;
        var clicked
      = false;
        var center
      = new google.maps.LatLng(0, 0);
        
      if (markers.length > 0)
        
      { center = new google.maps.LatLng(markers[0].lat, markers[0].lng); }
        
      else {
        alert
      ("No such asset available");
        
      }
        var mapOptions
      = {
        center
      : center, 
        zoom
      : 8,  
        mapTypeId
      : google.maps.MapTypeId.ROADMAP 
        
      };
        var map
      = new google.maps.Map(document.getElementById("map"), mapOptions);
        
      for (i = 0; i < markers.length; i++) {  
        var data
      = markers[i]  
        var myLatlng
      = new google.maps.LatLng(data.lat, data.lng); 
        switch
      (data.CCId) {
        
      case "1":
        icon
      = "images/red-dot.png";
        
      break;
        
      case "3":
        icon
      = "images/yellow-dot.png";
        
      break;
        
      case "2":
        icon
      = "images/green-dot.png"; 
        
      break;
        
      }

        var marker
      = new google.maps.Marker({  
        position
      : myLatlng,  
        map
      : map,  
        title
      : data.title  ,
        icon
      : new google.maps.MarkerImage(icon)
        
      });
        var contentString
      = '<div id="content">' +
        
      '<h4>Asset Details</h4>' +
        
      '<div id="bodyContent">' +
        
      ' <div id="outer" style="width:100%; text-align:center">'+
        
      '<div class="inner" style="display: inline-block;"><button id="AI" class="btn btn-default" onClick="AI();" >Information</button></div>'+
        
      ' <div class="inner" style="display: inline-block;"><button id="AP" class="btn btn-default" onClick="AP();">Parameters</button></div>'+
        
      ' <div class="inner" style="display: inline-block;"><button class="btn btn-default" onClick="return false;">Borrow</button></div>'+

        
      '</div>' +
        
      '</div>';

        var infoWindow
      = new google.maps.InfoWindow({ content: contentString });

        
      (function (marker, data) {  
        google
      .maps.event.addListener(marker, "click", function (e) {
        clicked
      = true;
        infoWindow
      .setContent(contentString);   //  data.Name
        infoWindow
      .open(map, marker); 
        
      // drawCircle(e.latLng);
        document
      .getElementById('AI').onclick = function AI() {
        infoWindow
      .setContent(
        
      '<div id="content">' +
        
      '<h4>Asset Details</h4>' +
        
      '<div id="bodyContent">' +
        
      '<h5>Asset Information</h5>' +
        
      '<br/>' +
        
      '<div id="AID">AssetID: ' + data.AID + '</div >' +

        
      '<div id="AssetName">Asset Name: ' + data.Name + '</div >'+

        
      '<div id="AGrpId">Asset Group: ' + data.AG + '</div >' +
        
      '<div id="SGId">Sub Group: ' + data.SG + '</div >' +

        
      '<div id="MnfId">Manufacturer of Asset: ' + data.Mnf + '</div >' +

        
      '<div id="SPId">Service Provider of Asset: ' + data.SP + '</div >' +

        
      '<div id="FId">Frequency of Warranty/Quaranty/PMC/AMC: ' + data.Fre + '</div >' +

        
      '<div id="TId">Tag type on Asset: ' + data.TT + '</div >' +

        
      '<div id="MId">Model of Asset: </div>' + data.Mnf + '</div >' +

        
      '<div id="description">Any other details: ' + data.des + '</div >' +

        
      '<div id="Camera">Does Asset have a camera: ' + data.Cam + '</div >' +
        
      '</div>' +
        
      '</div>');
        
      };


        document
      .getElementById('AP').onclick = function AP() {
        infoWindow
      .setContent(
        
      '<div id="content">' +

        
      '<h4>Asset Details</h4>' +
        
      '<div id="bodyContent">' +
        
      '<br/>' +
        
      '<h5>Asset Parameters</h5>' +
        
      '<br/>' +
        
      '<div id="CSId">Current Status: ' + data.CS + '</div >' +
        
      '<br/>' +
        
      '<div id="CCId">Current Condition: ' + data.CC+ '</div >' +  // here I need dropdown to appear from database and also it should be editable and te data entered to save in database

        
      '</div>' +
        
      '</div>');
        
      };
        
      });
        google
      .maps.event.addListener(marker, 'mouseover', function () {
        
      if (!clicked) {
        infoWindow
      .setContent('<IMG BORDER="0" ALIGN="Left" SRC="images/calender.png"> My name is '); //data.Photo<img src="images/calender.png" />
        infoWindow
      .open(map, marker);
        
      }
        
      });

        google
      .maps.event.addListener(marker, 'mouseout', function () {
        
      if (!clicked) {
        infoWindow
      .close();
        
      }
        
      });
        google
      .maps.event.addListener(infoWindow,
        
      'closeclick',
        
      function () {
        clicked
      = false;
        
      })
        
      })(marker, data);  
        
      }

        
      }