Issue with Geocoding in Google Maps API
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.
What stefpet means is replace
$(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;
});
});
with:
var map;
$(document).ready(function(){
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;
});
});
You declare the GMap2 instance as map in the local scope of the jQuery.ready() function. Then you refer to map as it was a global variable in the geoEncode() function.
加载中,请稍侯......
精彩评论