Solved

Drag map pointer and submit coordinates to DB

Posted on 2014-07-18
9
388 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
  • 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
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.

 
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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

861 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