Solved

Drag map pointer and submit coordinates to DB

Posted on 2014-07-18
9
391 Views
Last Modified: 2014-07-23
Railo4 / MySQl 5

In my real estate site, I have google maps on all property listings. The coordinates are pulled from my "map" table  however sometimes google geocoding is wrong, and I need to update the long & lat fields in my map table to the correct coordinates. I'd like to be able to do this by drag and drop the pin on the correct location and have that update my DB.

Here is a JS Fiddle that has the drag and drop functionality I want, but how do you go about getting these coordinates in a form to submit an Update?
http://jsfiddle.net/kjy112/QvNUF/

Thanks!
0
Comment
Question by:Bang-O-Matic
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 3
9 Comments
 

Author Comment

by:Bang-O-Matic
ID: 40211491
Anyone?
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40211981
I looked at your fiddle when you first posted this question because I was curious as to how dropping a pin on a map rendered in a browser could get you exact coordinates down to the building level. Since you are dealing with property listings, I assumed that that's the level of accuracy you wanted. But a browser window with a picture of a map and a GPS positioning system are two different things. I didn't think it possible. And sure enough, when I zoomed all the way in to building level, dropping a pin produced coordinates that were only accurate to about one city block. Not to individual buildings.

But if that's accurate enough, simply put the resulting coordinates in a text box or hidden field inside a form and POST them back to your server. I cannot speak to any Cold Fusion methods however.
0
 

Author Comment

by:Bang-O-Matic
ID: 40212824
Hi, on line 13 of the fiddle  you see:

google.maps.event.addListener(myMarker, 'dragend', function(evt){
    document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';
});

Change
 toFixed(3) +  

to

toFixed(6) +

and it will get right down to within a few meters.
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 40212865
That's awesome. It's a good day when I learn something new.

Can't help much with Cold Fusion, but I added a form on this updated fiddle and a line of javascript to populate the hidden field. Change the action attribute to your server side handler and retrieve the new coordinates from there and update the database.

http://jsfiddle.net/tommyBoy/QvNUF/545
0
 

Author Closing Comment

by:Bang-O-Matic
ID: 40212880
Thanks! that will get me started.
0
 

Author Comment

by:Bang-O-Matic
ID: 40215094
Hi Tom,

When I ran that code and dump the variable "Form.current_hide"

It just says empty string. Any ideas? Thanks




<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by kjy112</title>
 
 
   
      <script type='text/javascript' src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
   
 
  <style type='text/css'>
    #map_canvas{
    width: 100%;
    height: 800px;
}

#current{
     padding-top: 25px;
}
  </style>
 
</head>
<body>

 
 
 <div id='map_canvas'></div>
<div id="current">Nothing yet...</div>
<form id="form" action="mappointerupdate.cfm"  method="post">
    <input type="hidden" id="current_hide" />
    <input type="submit" value="Update Coords" />
</form>


<script type='text/javascript'>

var map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 1,
    center: new google.maps.LatLng(35.137879, -82.836914),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

var myMarker = new google.maps.Marker({
    position: new google.maps.LatLng(47.651968, 9.478485),
    draggable: true
});

google.maps.event.addListener(myMarker, 'dragend', function(evt){
    document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(6) + ' Current Lng: ' + evt.latLng.lng().toFixed(6) + '</p>';
    document.getElementById('current_hide').value = evt.latLng.lat().toFixed(6) + ',' + evt.latLng.lng().toFixed(6);
});

google.maps.event.addListener(myMarker, 'dragstart', function(evt){
    document.getElementById('current').innerHTML = '<p>Currently dragging marker...</p>';
});

map.setCenter(myMarker.position);
myMarker.setMap(map);

</script>


 
</body>
</html>

------------------------


action page:

<cfparam name="form.current_hide" default="">
 <cfoutput> <cfdump var= "#form.current_hide#"> </cfoutput>
0
 

Author Comment

by:Bang-O-Matic
ID: 40215203
Tom, never mind I figured it out, I just had to add "name" on the form field:

<input type="text" name="current_hide" id="current_hide" />
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40215231
Since I cannot speak to the CF syntax the only suggestion I can give is to add a value and see if that shows up like: <input type="hidden" id="current_hide" value="test" />. If it does then the problem is in assigning the value in the google map javascript. Also, I would id the form with "form1" or something other than "form". Too confusing.
0
 

Author Comment

by:Bang-O-Matic
ID: 40215482
Hi Tom, I had figured it out, see post just above your last.

Thanks again for the help!
0

Featured Post

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn how to dynamically set the form action using jQuery.

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question