1

I am working on Google Maps API, where I have made a dynamic marker popup. Now I want to take the user information from the popup and save it to my MySQL database without reloading the page. So I am trying to use AJAX. Hence I also want to close the marker popup window when the AJAX get success.

The problem is that my data values from popup is successfully saving in MySQL (I am using PHP in server end) database. But popup is not closing.

I am using the following piece of code in my JavaScript end:

  var map;
       var marker = [];
       var infowindow;
       var messagewindow;
         function initMap() {
           var jorhat = {lat: 26.728006, lng: 94.248314};
           map = new google.maps.Map(document.getElementById('map'),
           {
            center: jorhat,
            mapTypeId: google.maps.MapTypeId.HYBRID,
            mapTypeControl: true,
            mapTypeControlOption: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
            scaleControl: true,
            zoom: 10
           });

      var image = 'http://maps.google.com/mapfiles/kml/shapes/sunny.png';
      var markerinfo = new google.maps.Marker({
      position: jorhat,
      map: map,
      title: "Jorhat",
      icon: image
    });

    var Boundary = new google.maps.KmlLayer({
    url: 'https://storage.googleapis.com/testbetal/NDVI2017/kml.kml',
    map: map
    }); 

     infowindow = new google.maps.InfoWindow({
      content: document.getElementById('form')
    });

    messagewindow = new google.maps.InfoWindow({
      content: document.getElementById('message')
    });

    google.maps.event.addListener(map, 'click', function(event) {
      marker = new google.maps.Marker({
        position: event.latLng,
        map: map
      });  

      google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map, marker); 

      });

    }); 
}


function saveData() {
    var name = escape(document.getElementById('name').value);
    var address = escape(document.getElementById('address').value);
    var type = document.getElementById('type').value;
    var latlng = marker.getPosition();
    var url = 'phpsqlinfo_addrow.php?name=' + name + '&address=' + address +
              '&type=' + type + '&lat=' + latlng.lat() + '&lng=' + latlng.lng();

    downloadUrl(url, function(data, responseCode) {

      if (responseCode == 400 && data.length <= 1) {
        infowindow.close();
        messagewindow.open(map, marker);
      }
    });
  }

 function downloadUrl(url, callback) {
    var request = window.ActiveXObject ?
        new ActiveXObject('Microsoft.XMLHTTP') :
        new XMLHttpRequest;

    request.onreadystatechange = function() {
      if (request.readyState == 4) {
        request.onreadystatechange = doNothing;
        callback(request.responseText, request.status);
      }
    };

    request.open('GET', url, true);
    request.send(null);
  }

  function doNothing () {
  }

I am using following PHP code:

<?php
require("phpsqlinfo_dbinfo.php");

// Gets data from URL parameters.
$name = $_GET['name'];
$address = $_GET['address'];
$lat = $_GET['lat'];
$lng = $_GET['lng'];
$type = $_GET['type'];

// Opens a connection to a MySQL server.
$connection=mysql_connect ("localhost", $username, $password);
if (!$connection) {
  die('Not connected : ' . mysql_error());
}

// Sets the active MySQL database.
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
}

// Inserts new row with place data.
$query = sprintf("INSERT INTO user_info " .
         " (id, name, address, lat, lng, type ) " .
         " VALUES (NULL, '%s', '%s', '%s', '%s', '%s');",
         mysql_real_escape_string($name),
         mysql_real_escape_string($address),
         mysql_real_escape_string($lat),
         mysql_real_escape_string($lng),
         mysql_real_escape_string($type));

$result = mysql_query($query);
     #$command = escapeshellcmd('python C:\python\dynamicNDVI_fromDatabase.py');
     #$output = system($command);
     echo shell_exec("python C:\python\export_image.py $lat $lng");// to send the lat long variable to python for image analysis 


if (!$result) {
  die('Invalid query: ' . mysql_error());
}

?>

The only thing is My Marker popup is not closing, I am facing the same type of problem in Leaflet too.

I am new in JavaScript things.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.