Prototype, Google Maps Ajax API V3 - Errors but not sure why. - g.e is undefined
I am trying to write a simple (in my head ;D) page where a user can enter a location and it be displayed on a map. In the background there should be some fields:
latitude, longitude, zoom
These should be updated when a user enters a new location, moves the map or changes the zoom level.
Please find my code below, I am using the Prototype lib for this. The initial loading appears to work but when the map is moved I recieve an error in the console of:
g.e is undefined - main.js line 20
and on Zoom, the event is not fired. When a text search is made, LocationFound complains that SetLatLong is not a function?
Please help, I have spent the past few hours going in circles!!! :(
<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>
This works
google.maps.event.addListener(this.gmap, 'dragend', function () { Map.MapMoved() });
The accepted answer doesn't make this obvious, but the issue here is that:
google.maps.event.addListener(this.gmap, 'zoom_changed', this.Zoomed());
Where:
Zoomed : function () { $('zoom').value = this.gmap.getZoom(); },
Notice specifically that the result of calling zoomed (ie. the undef that this.Zoomed() returns) is set as the event handler, not zoomed itself; the error here (g.e is undefined) is characteristic of passing an invalid value to a maps event handler API.
This code would work if it read:
google.maps.event.addListener(this.gmap, 'zoom_changed', this.Zoomed);
加载中,请稍侯......
精彩评论