title: Update db with latitude and longitude when google map marker point is move
body: <p>Well, I've a google map where all lat and long comes from db and it's showing on the map.  </p>
  
  <p>What I can do with this map:  </p>
  
  <p>1) I can create new point after right click on the map,<br>
  2) I can delete existing point.  </p>
  
  <p>Now can you plz tell me how can i update the db with new lat and long when the existing marker point is move to another place ?</p>
  
  <p>you can see my live map on www.creativeartbd.com/map</p>
  
  <p><strong>Index.php page code:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Google Map&lt;/title&gt;
  &lt;script type="text/javascript" src="js/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://maps.googleapis.com/maps/api    
  /js?sensor=false"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
  
  var mapCenter = new google.maps.LatLng(23.721869, 90.390518); //Google map 
  Coordinates
  var map;
  
  map_initialize(); // initialize google map
  
  //############### Google Map Initialize ##############
  function map_initialize()
  {
          var googleMapOptions = 
          { 
              center: mapCenter, // map center
              zoom: 15, //zoom level, 0 = earth view to higher value
              maxZoom: 15,
              minZoom: 5,
              zoomControlOptions: {
          style: google.maps.ZoomControlStyle.SMALL //zoom control size
          },
      scaleControl: true, // enable scale control             
      mapTypeId: google.maps.MapTypeId.ROADMAP // google map type
          };
  
  map = new google.maps.Map(document.getElementById("google_map"), 
  googleMapOptions);          
  
          //Load Markers from the XML File, Check (map_process.php)
          $.get("map_process.php", function (data) {
              $(data).find("marker").each(function () {
            var name      = $(this).attr('name');
            var address   = '&lt;p&gt;'+ $(this).attr('address') +'&lt;/p&gt;';
            var type      = $(this).attr('type');
            var point     = new 
  google.maps.LatLng(parseFloat($(this).attr('lat')),parseFloat($(this).attr('lng')));
  create_marker(point, name, address, false, false, false, "icons/pin_blue.png");
              });
          }); 
  
          //Right Click to Drop a New Marker
          google.maps.event.addListener(map, 'rightclick', function(event) {
              //Edit form to be displayed with new marker
  var EditForm = '&lt;p&gt;&lt;div class="marker-edit"&gt;'+
  '&lt;form action="ajax-save.php" method="POST" name="SaveMarker" id="SaveMarker"&gt;'+
  '&lt;label for="pName"&gt;&lt;span&gt;Place Name :&lt;/span&gt;&lt;input type="text" name="pName" 
  class="save-name" placeholder="Enter Title" maxlength="40" /&gt;&lt;/label&gt;'+
  '&lt;label for="pDesc"&gt;&lt;span&gt;Description :&lt;/span&gt;&lt;textarea name="pDesc" class="save-desc" 
  placeholder="Enter Address" maxlength="150"&gt;&lt;/textarea&gt;&lt;/label&gt;'+
  '&lt;label for="pType"&gt;&lt;span&gt;Type :&lt;/span&gt; &lt;select name="pType" class="save-type"&gt;&lt;option 
  value="restaurant"&gt;Rastaurant&lt;/option&gt;&lt;option value="bar"&gt;Bar&lt;/option&gt;'+
  '&lt;option value="house"&gt;House&lt;/option&gt;&lt;/select&gt;&lt;/label&gt;'+
  '&lt;/form&gt;'+
  '&lt;/div&gt;&lt;/p&gt;&lt;button name="save-marker" class="save-marker"&gt;Save Marker 
  Details&lt;/button&gt;';
  
  //Drop a new Marker with our Edit Form
  create_marker(event.latLng, 'New Marker', EditForm, true, true, true, 
  "icons/pin_green.png");
          });
  
  }
  
  //############### Create Marker Function ##############
  function create_marker(MapPos, MapTitle, MapDesc,  InfoOpenDefault, DragAble, 
  Removable, iconPath)
  {                 
  
      //new marker
      var marker = new google.maps.Marker({
          position: MapPos,
          map: map,
          draggable:true,
          animation: google.maps.Animation.DROP,
          title:"Hello World!",
          icon: iconPath
      });
  
      //Content structure of info Window for the Markers
      var contentString = $('&lt;div class="marker-info-win"&gt;'+
      '&lt;div class="marker-inner-win"&gt;&lt;span class="info-content"&gt;'+
      '&lt;h1 class="marker-heading"&gt;'+MapTitle+'&lt;/h1&gt;'+
      MapDesc+ 
      '&lt;/span&gt;&lt;button name="remove-marker" class="remove-marker" title="Remove 
  Marker"&gt;Remove Marker&lt;/button&gt;'+
      '&lt;/div&gt;&lt;/div&gt;');    
  
  
      //Create an infoWindow
      var infowindow = new google.maps.InfoWindow();
      //set the content of infoWindow
      infowindow.setContent(contentString[0]);
  
      //Find remove button in infoWindow
      var removeBtn   = contentString.find('button.remove-marker')[0];
      var saveBtn     = contentString.find('button.save-marker')[0];
  
      //add click listner to remove marker button
      google.maps.event.addDomListener(removeBtn, "click", function(event) {
          remove_marker(marker);
      });
  
  if(typeof saveBtn !== 'undefined') //continue only when save button is present
      {
          //add click listner to save marker button
          google.maps.event.addDomListener(saveBtn, "click", function(event) 
  {
              var mReplace = contentString.find('span.info-content'); 
  //html to be replaced after success
  var mName = contentString.find('input.save-name')[0].value; //name input field value
  var mDesc  = contentString.find('textarea.save-desc')[0].value; //description input 
  field value
  var mType = contentString.find('select.save-type')[0].value; //type of marker
  
              if(mName =='' || mDesc =='')
              {
                  alert("Please enter Name and Description!");
              }else{
                  save_marker(marker, mName, mDesc, mType, 
  mReplace); //call save marker function
              }
          });
      }
  
      //add click listner to save marker button        
      google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker); // click on marker opens info window 
      });
  
      if(InfoOpenDefault) //whether info window should be open by default
      {
        infowindow.open(map,marker);
      }
  }
  
  //############### Remove Marker Function ##############
  function remove_marker(Marker)
  {
  
      /* determine whether marker is draggable 
      new markers are draggable and saved markers are fixed */
  
          //Remove saved marker from DB and map using jQuery Ajax
      var mLatLang = Marker.getPosition().toUrlValue(); //get marker position
          var myData = {del : 'true', latlang : mLatLang}; //post variables
          $.ajax({
            type: "POST",
            url: "map_process.php",
            data: myData,
            success:function(data){
                  Marker.setMap(null); 
                  alert(data);
              },
              error:function (xhr, ajaxOptions, thrownError){
                  alert(thrownError); //throw any errors
              }
          });
  
  
  }
  
  //############### Save Marker Function ##############
  function save_marker(Marker, mName, mAddress, mType, replaceWin)
  {
      //Save new marker using jQuery Ajax
      var mLatLang = Marker.getPosition().toUrlValue(); //get marker position
      var myData = {name : mName, address : mAddress, latlang : mLatLang, type : 
  mType }; //post variables
      console.log(replaceWin);        
      $.ajax({
        type: "POST",
        url: "map_process.php",
        data: myData,
        success:function(data){
              replaceWin.html(data); //replace info window with new html
              Marker.setDraggable(true); //set marker to fixed
              Marker.setIcon('icons/pin_blue.png'); //replace icon
          },
          error:function (xhr, ajaxOptions, thrownError){
              alert(thrownError); //throw any errors
          }
      });
  }
  
  });
  &lt;/script&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;             
  &lt;h1 class="heading"&gt;My Google Map&lt;/h1&gt;
  &lt;div align="center"&gt;Right Click to Drop a New Marker&lt;/div&gt;
  &lt;div id="google_map"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Map_process.php code</strong></p>
  
  <p>
  
  <pre><code>// database settings 
  $db_username = 'username';
  $db_password = 'pass';
  $db_name = 'db';
  $db_host = 'my host';
  
  //mysqli
  $mysqli = new mysqli($db_host, $db_username, $db_password, $db_name);
  
  if (mysqli_connect_errno()) 
  {
  header('HTTP/1.1 500 Error: Could not connect to db!'); 
  exit();
  }
  
  ################ Save &amp; delete markers #################
  if($_POST) //run only if there's a post data
  {
  //make sure request is comming from Ajax
  $xhr = $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'; 
  if (!$xhr){ 
      header('HTTP/1.1 500 Error: Request must come from Ajax!'); 
      exit(); 
  }
  
  // get marker position and split it for database
  $mLatLang   = explode(',',$_POST["latlang"]);
  $mLat       = filter_var($mLatLang[0], FILTER_VALIDATE_FLOAT);
  $mLng       = filter_var($mLatLang[1], FILTER_VALIDATE_FLOAT);
  
  //Delete Marker
  if(isset($_POST["del"]) &amp;&amp; $_POST["del"]==true)
  {
  $results = $mysqli-&gt;query("DELETE FROM markers WHERE lat=$mLat AND lng=$mLng");
      if (!$results) {  
        header('HTTP/1.1 500 Error: Could not delete Markers!'); 
        exit();
      } 
      exit("Done!");
  }
  
  $mName      = filter_var($_POST["name"], FILTER_SANITIZE_STRING);
  $mAddress   = filter_var($_POST["address"], FILTER_SANITIZE_STRING);
  $mType      = filter_var($_POST["type"], FILTER_SANITIZE_STRING);
  
  $results = $mysqli-&gt;query("INSERT INTO markers (name, address, lat, lng, type) 
  VALUES ('$mName','$mAddress',$mLat, $mLng, '$mType')");
  if (!$results) {  
        header('HTTP/1.1 500 Error: Could not create marker!'); 
        exit();
  } 
  
  $output = '&lt;h1 class="marker-heading"&gt;'.$mName.'&lt;/h1&gt;&lt;p&gt;'.$mAddress.'&lt;/p&gt;';
  exit($output);
  }
  
  
  ################ Continue generating Map XML #################
  
  //Create a new DOMDocument object
  $dom = new DOMDocument("1.0");
  $node = $dom-&gt;createElement("markers"); //Create new element node
  $parnode = $dom-&gt;appendChild($node); //make the node show up 
  
  // Select all the rows in the markers table
  $results = $mysqli-&gt;query("SELECT * FROM markers WHERE 1");
  if (!$results) {  
  header('HTTP/1.1 500 Error: Could not get markers!'); 
  exit();
  } 
  
  //set document header to text/xml
  header("Content-type: text/xml"); 
  
  // Iterate through the rows, adding XML nodes for each
  while($obj = $results-&gt;fetch_object())
  {
   $node = $dom-&gt;createElement("marker");  
   $newnode = $parnode-&gt;appendChild($node);   
   $newnode-&gt;setAttribute("name",$obj-&gt;name);
   $newnode-&gt;setAttribute("address", $obj-&gt;address);  
   $newnode-&gt;setAttribute("lat", $obj-&gt;lat);  
   $newnode-&gt;setAttribute("lng", $obj-&gt;lng);  
   $newnode-&gt;setAttribute("type", $obj-&gt;type);    
  }
  
  echo $dom-&gt;saveXML();
  </code></pre>
  
  <p>Thanks a ton for you help :)</p>