Question

I wonder whether someone may be able to help me please.

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.

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.

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.

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.

(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 = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';
        });

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

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

      } 

    });

  }

})();

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.

Many thanks and kind regards

Chris

Answer 1

Instead of evt.latLng.lat().toFixed(3) you should just use the myMarker object and grab it’s position.

Getting the nearest address is not that easy, but requires reverse geocoding, and to be honest I don’t see the point in doing it. You would have to make special cases for the occurences where there couldn’t be found a closest address and stuff like that.

If you really want to do it though there is a webservice you can call to do it.