Я опробую функцию геокодирования API Карт Google. Карта загружается нормально, но у меня возникла проблема с геокодированием. У меня есть текстовое поле на странице, где я ввожу местоположение, и при нажатии кнопки отправки я хотел бы чтобы точно указать введенное местоположение на карте.
Метод setCenter правильно отмечает местоположение на карте, когда я в первый раз вызываю его с заранее заданными координатами. Но при вызове из функции обратного вызова, которую я определил для getLatLng, местоположение на карте не изменяется, чтобы отразить местоположение, введенное пользователем.
Любая помощь относительно того, как это исправить, будет очень признательна. Ниже мой код.
<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>
Спасибо.