Hi,
I wonder whether someone may possibly be able to help me please.
I've written the code (shown below) to try and create a map which, upon the
user entering an address and clicking a 'Search' button, takes them to that
address, automaticallly filling in the Latiutude and Longitude fields,
adding the draggable marker functionality, allowing the user to 'fine tune'
the address.
Independently, I have the code, which works, whereby the user can type in
the address, clicks 'Search' and the location is pinpointed on the map and
the Latitude and Longitude fields on my form are populated with the correct
co-ordinates. And by the same token I can get the 'draggable marker' code
(taken from the demo on the Google API link) to work, but on putting them
together I don't quite get what I need i.e. The Latitude and Longitude
fields completed and then a draggable marker which, upon dragging by the
user updates those fields.
Could someone please take a look at this and let me know where I'm going
wrong.
Many thanks and regards
Chris
(function() {
// Defining some global variables
var map, geocoder, marker, infowindow;
window.onload = function() {
// Creating a new map
var options = {
zoom: 16,
center: new google.maps.LatLng(37.09, -95.71),
mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById('map'), options);
// Getting a reference to the HTML form
var form = document.getElementById('SearchForLocationForm');
// 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);
// Check to see if we've already got a Marker object
if (!marker) {
// Creating a new marker and adding it to the map
marker = new google.maps.Marker({
map: map,
draggable:true
});
}
// Setting the position of the marker to the returned location
marker.setPosition(results[0].geometry.location);
// Update current position info.
updateMarkerPosition(latlng);
geocodePosition(latlng);
// Add dragging event listeners.
google.maps.event.addListener(marker, 'dragstart', function() {
updateMarkerAddress('Dragging...');
});
google.maps.event.addListener(marker, 'drag', function() {
updateMarkerStatus('Dragging...');
updateMarkerPosition(marker.getPosition());
});
google.maps.event.addListener(marker, 'dragend', function() {
updateMarkerStatus('Drag ended');
geocodePosition(marker.getPosition());
});
}
document.getElementById('Latitude').value=
results[0].geometry.location.lat();
document.getElementById('Longitude').value=
results[0].geometry.location.lng();
}
);
}
})();
--
You received this message because you are subscribed to the Google Groups
"Google Maps JavaScript API v3" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-maps-js-api-v3?hl=en.
