Я пытаюсь написать простую (в моей голове; D) страницу, где пользователь может ввести местоположение и отобразить его на карте.В фоновом режиме должны быть поля:
широта, долгота, масштаб
. Они должны обновляться, когда пользователь вводит новое местоположение, перемещает карту или изменяет уровень масштабирования.
Пожалуйста, найдите мой код ниже, я использую Prototype lib для этого.Начальная загрузка работает, но когда карта перемещается, я получаю сообщение об ошибке в консоли:
ge не определено - строка main.js 20
и в Zoom событие неуволена.Когда выполняется текстовый поиск, LocationFound жалуется, что SetLatLong не является функцией?
Пожалуйста, помогите, я провел последние несколько часов в кругах !!!: (
<html>
<head>
<title>Google Maps</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var Map = {
gmap : '',
geocoder : '',
map_container : '',
geocode_input : '',
geocode_form : '',
CreateMap : function(){
this.map_container = $('gmap');
this.geocode_form = $('gmap_form');
this.geocode_input = $('gmap_input');
try {
this.ConfigureMap();
this.SetDefaultLocation();
this.ConfigureGeocoder();
this.Listen();
} catch(err) {
console.debug(err);
}
},
ConfigureMap : function() {
var DefaultMapOptions = {
zoom: 3,
center: new google.maps.LatLng(43.834526782236814, -37.265625),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.gmap = new google.maps.Map(this.map_container, DefaultMapOptions);
},
ConfigureGeocoder : function() {
this.geocoder = new google.maps.Geocoder();
},
SetDefaultLocation : function() {
//TODO: Check if a location string is already present
//if (google.loader.ClientLocation) { //default to IP location if possible - not using loader anymore so comment out for now.
// this.SetLatLong(google.loader.ClientLocation.latitude,google.loader.ClientLocation.longitude, 8);
//}
},
SetLatLong : function(lat, lon, zoomLevel){
this.gmap.setCenter(new google.maps.LatLng(lat, lon));
if (zoomLevel){
this.gmap.setZoom(zoomLevel);
}
$('latitude').value = lat;
$('longitude').value = lon;
},
Listen : function() {
google.maps.event.addListener(this.gmap, 'dragend', this.MapMoved());
google.maps.event.addListener(this.gmap, 'zoom_changed', this.Zoomed());
Event.observe(this.geocode_form, 'submit', this.FindLocation(this.geocode_input));
},
Zoomed : function (){
$('zoom').value = this.gmap.getZoom();
},
MapMoved : function(){
console.debug('map moved');
var position = this.gmap.getCenter();
this.SetLatLong(position.lat(), position.lng());
},
FindLocation : function(location){
if (location){
var address = location.value;
if (address){
try {
this.geocoder.geocode( { 'address' : address }, this.LocationFound );
} catch(err) {
console.debug(err);
}
}
}
return false;
},
LocationFound : function(results, status){
if (status == google.maps.GeocoderStatus.OK) {
//THIS IS DYING TOO? :(
this.SetLatLong(results[0].geometry.location.lat(), results[0].geometry.location.lng());
} else {
alert("Geocode was not successful for the following reason: " + status);
}
}
};
document.observe('dom:loaded', function(event){
Map.CreateMap();
}.bind(this));
</script>
<style>
div#gmap {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<form action="http://maps.google.com/maps" id="gmap_form">
<p>
<label for="geocodeInput">Location Text:</label>
<input type="text" name="q" id="gmap_input">
<input type="submit" value="Zoom to place">
</p>
</form>
<div id="gmap"></div>
<p><strong>Latitude, Longitude:</strong> <input type="text" id="latitude"><input type="text" id="longitude"></span></p>
<p><strong>Zoom:</strong> <input type="text" id="zoom"></p>
</body>