165
rated 0 times
[
168]
[
3]
/ answers: 1 / hits: 43883
/ 13 Years ago, sat, june 25, 2011, 12:00:00
I've been working on putting together the Javavscript code for Reverse Geocoding in Google maps. I thought I'd solved all the issues I had, but I'm still having problems.
When I embed the Javascript code within the HTML file it works without any problems. However if I try and run the javascript (with some alterations), as a separate file, the map loads upon opening my form, but when I enter the Lat and Lng co-ordinates and press the relevant button to Reverse Geocode, all that happens is that the map is refreshed.
I've attached the HTML file with the JS code embed and then the separate JS code file to make a comparison.
HTML file with embedded Javascript
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content=initial-scale=1.0, user-scalable=no/>
<meta http-equiv=content-type content=text/html; charset=UTF-8/>
<title>Google Maps JavaScript API v3 Example: Reverse Geocoding</title>
<link href=http://code.google.com/apis/maps/documentation/javascript/examples/default.css rel=stylesheet type=text/css />
<script type=text/javascript src=http://maps.google.com/maps/api/js?sensor=false></script>
<script type=text/javascript>
var geocoder;
var map;
var infowindow = new google.maps.InfoWindow();
var marker;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(40.730885,-73.997383);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: 'roadmap'
}
map = new google.maps.Map(document.getElementById(map_canvas), myOptions);
}
function codeLatLng() {
var lat = document.getElementById('Latitude').value;
var lng = document.getElementById('Longitude').value;
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
map.setZoom(11);
marker = new google.maps.Marker({
position: latlng,
map: map
});
var address= (results[1].formatted_address);
document.getElementById('Address').value= results[1].formatted_address;
infowindow.setContent(results[1].formatted_address);
infowindow.open(map, marker);
} else {
alert(No results found);
}
} else {
alert(Geocoder failed due to: + status);
}
});
}
</script>
</head>
<body onLoad=initialize()>
<div>
<input name=Latitude type=text id=Latitude size=16 maxlength=10 />
<input name=Longitude type=text id=Longitude size=16 maxlength=10 />
<input name=Address type=text id=Address size=55 />
</div>
<div>
<input type=button value=Reverse Geocode onClick=codeLatLng()>
</div>
<div id=map_canvas style=height: 90%; top:60px; border: 1px solid black;></div>
</body>
</html>
Javascript Code
(function ReverseGeocode() {
//This is declaring the Global variables
var geocoder, map, marker;
//This is declaring the 'Geocoder' variable
geocoder = new google.maps.Geocoder();
window.onload = function() {
//This is creating the map with the desired options
var myOptions = {
zoom: 6,
center: new google.maps.LatLng(54.312195845815246,-4.45948481875007),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_RIGHT
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN,
position: google.maps.ControlPosition.TOP_LEFT
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM_LEFT
}
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
var form = document.getElementById('SearchForLocationForm');
//This is getting the 'Latitude' and 'Longtiude' co-ordinates from the associated text boxes on the HTML form
var lat = document.getElementById('Latitude').value;
var lng = document.getElementById('Longitude').value;
//This is putting the 'Latitude' and 'Longitude' variables together to make the 'latlng' variable
var latlng = new google.maps.LatLng(lat, lng);
// This is making the Geocode request
geocoder.geocode({'latLng': latlng}, function(results, status) {
// This is checking to see if the Geoeode Status is OK before proceeding
if (status == google.maps.GeocoderStatus.OK) {
//This is placing the marker at the returned address
if (results[1]) {
// Creating a new marker and adding it to the map
map.setZoom(16);
marker = new google.maps.Marker({
map: map, draggable:true
});
}
var address= (results[1].formatted_address);
//This is placing the returned address in the 'Address' field on the HTML form
document.getElementById('Address').value= results[1].formatted_address;
}
}
);
};
})();
More From » google-maps-api-3
