Hello,
Im trying out the Google Maps API Geocoding feature.The map loads fine, but im facing an issue with geocoding.I have a text box on the page where i enter the location, and on clicking the submit button, i would like to pinpoint the entered location on the map.
The setCenter method correctly marks the location on the map, first time i call it with predefined coordinates. But when called from within the callback function i defined for getLatLng,the location on the map does not change to reflect the location entered by the user.
Any help regarding how to fix this would be really appreciated. Below is my code.
<html>
<head>
<title>Google Maps</title>
<script type="text/javascript" src="http://www.google.com/jsapi?key=my_api_key"> </script>
<script type="text/javascript" charset="utf-8">
google.load("maps", "2.x");
google.load("jquery", "1.3.1");
</script>
<script>
$(document).ready(function(){
var map = new GMap2(document.getElementById('map'));
var burnsvilleMN = new GLatLng(44.797916,-93.278046);
map.setCenter(burnsvilleMN, 8);
$("#add-point").submit(function(){
geoEncode();
return false;
});
});
function geoEncode(){
var geocoder = new GClientGeocoder();
var reasons = [];
reasons[G_GEO_SUCCESS] = "Success";
reasons[G_GEO_MISSING_ADDRESS] = "Missing Address";
reasons[G_GEO_UNKNOWN_ADDRESS] = "Unknown Address.";
reasons[G_GEO_UNAVAILABLE_ADDRESS] = "Unavailable Address";
reasons[G_GEO_BAD_KEY] = "Bad API Key";
reasons[G_GEO_TOO_MANY_QUERIES] = "Too Many Queries";
reasons[G_GEO_SERVER_ERROR] = "Server error";
var address = $("#add-point input[name=address]").val();
if (geocoder) {
geocoder.getLatLng(address, function(point){
if (!point) {
alert(address + " not found");
}
else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
});
}
else {
alert("Some Error :(");
}
}
</script>
<style type="text/css">
#map { width:500px; height:500px;float:right;}
#add-point { float:left; }
div.input { padding:3px 0; }
label { display:block; font-size:80%; }
input, select { width:150px; }
button { float:right; }
div.error { color:red; font-weight:bold; }
</style>
</head>
<body>
<form id="add-point" action="" method="POST">
<input type="hidden" name="action" value="savepoint" id="action">
<fieldset>
<legend>Add a Point to the Map</legend>
<div class="error" style="display:none;"></div>
<div class="input">
<label for="name">Location Name</label>
<input type="text" name="name" id="name" value="">
</div>
<div class="input">
<label for="address">Address</label>
<input type="text" name="address" id="address" value="">
</div>
<button type="submit">Add Point</button>
</fieldset>
</form>
<div id="map"></div>
</body>
</html>
Thank You.