Databases
StackOverflow2013
Postsdbo
PODraggable Marker to Update Lat and Long Fields
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODraggable Marker to Update Lat and Long Fields
    primarykey
    data
    text
    <p>I wonder whether someone may be able to help me please.</p> <p>I've put some coding together (please see below) whereby a user goes onto a HTML form, they type in an address and click a 'Search' button. Upon doing this, the location is plotted on the Google map and the Lat and Long co-oridnates are automatically entered into the associated text boxes on my form.</p> <p>What I would like to do, if at all possible, is for the marker to be draggable so the user can fine tune the location, and as they drag the marker, I'd like for the Lat and Long fields to change their associated co-ordinates.</p> <p>In addition, I'd also like, if at all possible, to have a field on the form called 'NearestAddress' to show the nearest address to where the marker has been dragged to.</p> <p>I've managed to make the markers draggable but they don't update the Latitude and Longitude text boxes. I'm also unsure how to add the functionality to show the updated address to where the marker has been dragged to. </p> <pre><code>(function() { // Defining some global variables var map, geocoder, myMarker, infowindow; window.onload = function() { // Creating a new map var options = { zoom: 3, center: new google.maps.LatLng(55.378051,-3.435973), mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map'), options); // Getting a reference to the HTML form var form = document.getElementById('LocationSearchForm'); // Catching the forms submit event form.onsubmit = function() { // Getting the address from the text input var address = document.getElementById('Address').value; // Making the Geocoder call getCoordinates(address); // Preventing the form from doing a page submit return false; } } // Create a function the will return the coordinates for the address function getCoordinates(address) { // Check to see if we already have a geocoded object. If not we create one if(!geocoder) { geocoder = new google.maps.Geocoder(); } // Creating a GeocoderRequest object var geocoderRequest = { address: address } // Making the Geocode request geocoder.geocode(geocoderRequest, function(results, status) { // Check if status is OK before proceeding if (status == google.maps.GeocoderStatus.OK) { // Center the map on the returned location map.setCenter(results[0].geometry.location); // Creating a new marker and adding it to the map var myMarker = new google.maps.Marker({ map: map, position: results[0].geometry.location, draggable:true }); document.getElementById('Latitude').value= results[0].geometry.location.lat(); document.getElementById('Longitude').value= results[0].geometry.location.lng(); google.maps.event.addListener(myMarker, 'dragend', function(evt){ document.getElementById('current').innerHTML = '&lt;p&gt;Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '&lt;/p&gt;'; }); google.maps.event.addListener(myMarker, 'dragstart', function(evt){ document.getElementById('current').innerHTML = '&lt;p&gt;Currently dragging marker...&lt;/p&gt;'; }); map.setCenter(myMarker.position); myMarker.setMap(map); } }); } })(); </code></pre> <p>I am new to Google maps development and I'm not even sure whether it's possible to achieve what I want. I've been working on this now for a few weeks and it's driving me a little crazy, so if someone could perhaps point me in the right direction it would gratefully be received.</p> <p>Many thanks and kind regards</p> <p>Chris</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USIRHM
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTDuplicate
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload