32093

Update db with latitude and longitude when google map marker point is move

Question:

Well, I've a google map where all lat and long comes from db and it's showing on the map.

What I can do with this map:

1) I can create new point after right click on the map,<br /> 2) I can delete existing point.

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 ?

you can see my live map on www.creativeartbd.com/map

<strong>Index.php page code:</strong>

<!DOCTYPE html> <html> <head> <title>Google Map</title> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="http://maps.googleapis.com/maps/api /js?sensor=false"></script> <script type="text/javascript"> $(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 = '

'+ $(this).attr('address') +'

'; 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 = '

<div class="marker-edit">'+ '<form action="ajax-save.php" method="POST" name="SaveMarker" id="SaveMarker">'+ '<label for="pName"><span>Place Name :</span><input type="text" name="pName" class="save-name" placeholder="Enter Title" maxlength="40" /></label>'+ '<label for="pDesc"><span>Description :</span><textarea name="pDesc" class="save-desc" placeholder="Enter Address" maxlength="150"></textarea></label>'+ '<label for="pType"><span>Type :</span> <select name="pType" class="save-type"><option value="restaurant">Rastaurant</option><option value="bar">Bar</option>'+ '<option value="house">House</option></select></label>'+ '</form>'+ '</div>

<button name="save-marker" class="save-marker">Save Marker Details</button>'; //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 = $('<div class="marker-info-win">'+ '<div class="marker-inner-win"><span class="info-content">'+ '<h1 class="marker-heading">'+MapTitle+'

'+ MapDesc+ '</span><button name="remove-marker" class="remove-marker" title="Remove Marker">Remove Marker</button>'+ '</div></div>'); //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 } }); } }); </script> </head> <body> <h1 class="heading">My Google Map

<div align="center">Right Click to Drop a New Marker</div> <div id="google_map"></div> </body> </html>

<strong>Map_process.php code</strong>

// 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 & 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"]) && $_POST["del"]==true) { $results = $mysqli->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->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 = '<h1 class="marker-heading">'.$mName.'

'.$mAddress.'

'; exit($output); } ################ Continue generating Map XML ################# //Create a new DOMDocument object $dom = new DOMDocument("1.0"); $node = $dom->createElement("markers"); //Create new element node $parnode = $dom->appendChild($node); //make the node show up // Select all the rows in the markers table $results = $mysqli->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->fetch_object()) { $node = $dom->createElement("marker"); $newnode = $parnode->appendChild($node); $newnode->setAttribute("name",$obj->name); $newnode->setAttribute("address", $obj->address); $newnode->setAttribute("lat", $obj->lat); $newnode->setAttribute("lng", $obj->lng); $newnode->setAttribute("type", $obj->type); } echo $dom->saveXML();

Thanks a ton for you help :)

Answer1:

You should add an even listener to the marker that is fired when the marker is dropped.

// adds an event listener on the marker. // The event is fired when the marker is dropped in this case google.maps.event.addListener(marker, 'dragend', function() { alert('Marker dropped'); });

Don't forget to set the marker option draggable:true

Here is the doc for the methods and events for the Marker class: <a href="https://developers.google.com/maps/documentation/javascript/3.exp/reference#Marker" rel="nofollow">google.maps.Marker</a>

And here a demo on <a href="http://jsfiddle.net/2LGJb/2/" rel="nofollow">jsFiddle</a>

Recommend

  • How can I get my Partial Class to update
  • How to convert Library project into jar
  • d3 enter() / merge() creates copies instead of updating
  • jquery bind change css
  • JPA and database in a single jar
  • What's the difference between using a heading tag and a large font in a tag?
  • Easy way to convert a Bitmap and Png Image to text and vice versa
  • Is mp4 stream able with ffserver?
  • Table striping rows in CSS Grid
  • Custom Nav Title offset ios 11
  • lauch4j hello world program
  • Spring security - same page to deliver different content based on user role
  • css background images not always displayed
  • You tube videos are not playing
  • Bootstrap (v3.3.4) glyphicons not displayed in IE when refresh page (F5)
  • Implementing “partial void” in VB
  • Sending HTML Form Data to Spring REST Web Service
  • Adding elements to a huge XML file
  • Blackberry - Custom EditField Cursor
  • AJAX Html Editor Extender upload image appearing blank
  • Android full screen on only one activity?
  • Django: Count of Group Elements
  • FileReader+canvas image loading problem
  • Insert into database using onclick function
  • Deselecting radio buttons while keeping the View Model in synch
  • Fetching methods from BroadcastReceiver to update UI
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Window Size for Mac application
  • Symfony2: How to get request parameter
  • what is the difference between the asp.net mvc application and asp.net web application
  • jQuery tmpl and DataLink beta
  • GridView Sorting works once only
  • SQL merge duplicate rows and join values that are different
  • WPF Applying a trigger on binding failure
  • Proper way to use connect-multiparty with express.js?
  • How to set the response of a form post action to a iframe source?
  • Java static initializers and reflection
  • unknown Exception android
  • Observable and ngFor in Angular 2
  • Unable to use reactive element in my shiny app