Función no definida
Recibo un error de función no definida con mi script jquery y no estoy seguro de por qué.
Código de JQuery: http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAhTrgZ5jvdqcEQouEpPcZ_hS81NmJwGXlxuJr8lEEo4Njw3WRVhT8auzZb55JSMDkwI> "NGTKH"
<script type="text/javascript">
$(document).ready(function(){
var dealerName = $('.name', '.adr').text();
var customerName = dealerName.slice(0, - 1);
var customerAddress = $('.street', '.adr').text() + ', ' + $('.locality', '.adr').text() + ', ' + $('.state', '.adr').text() + ', ' + $('.zipCode', '.adr').text();
$("#nameAddress .placeholderName").html(customerName);
$("#nameAddress .placeholderAddress").html(customerAddress);
var error_address_empty = 'Please enter a valid address first.';
var error_invalid_address = 'This address is invalid. Make sure to enter your street number and city as well?';
var error_google_error = 'There was a problem processing your request, please try again.';
var error_no_map_info = 'Sorry! Map information is not available for this address.';
var default_address = customerAddress;
var current_address = null;
var map = null;
var geocoder = null;
var gdir = null;
var map_compatible = false;
if( GBrowserIsCompatible() ) {
map_compatible = true;
}
function initialize_map() {
if( map_compatible ) {
map = new GMap2(document.getElementById('map_canvas'));
geocoder = new GClientGeocoder();
show_address(default_address);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
}
}
function show_address(address) {
if( map_compatible && geocoder ) {
current_address = address;
geocoder.getLatLng(
address,
function( point ) {
if( !point ) {
alert(error_no_map_info);
} else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml("<span style='font-size:14px; font-weight:bold;'>" + customerName + "<br /></span><span style='font-size:12px;'>" + address + "</span>");
}
}
);
}
return false;
}
function get_directions() {
if( map_compatible ) {
if( document.direction_form.from_address.value == '' ) {
alert(error_address_empty);
return false;
}
document.getElementById('directions').innerHTML = '';
gdir = new GDirections(map, document.getElementById('directions'));
GEvent.addListener(gdir, 'error', handleErrors);
set_directions(document.direction_form.from_address.value, current_address);
}
return false;
}
function set_directions(fromAddress, toAddress) {
gdir.load("from: " + fromAddress + " to: " + toAddress,
{ "locale": "en" });
}
function handleErrors(){
if( gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS )
alert(error_invalid_address);
else if( gdir.getStatus().code == G_GEO_SERVER_ERROR )
alert(error_google_error);
else if( gdir.getStatus().code == G_GEO_MISSING_QUERY )
alert(error_address_empty);
else
alert(error_invalid_address);
}
$(window).load(initialize_map);
});
</script>
Código de la página HTML:
<div id="main-map-wrapper">
<div id="seperator"></div>
<table width="100%" height="94">
<tr valign="top">
<td width="33%" colspan="3">
<div id="headertextdiv">
<div id="nameAddress">
<span class="placeholderName" style="font-size:20px; font-weight:bold; line-height:22px;"> </span>
<br />
<span class="placeholderAddress" style="font-size:14px; font-weight:bold; line-height:22px;"> </span>
<br />
<input type="submit" onClick="return show_address('5930 West Plano Pkwy, Plano, Texas, 75093');" value="Center Map on Dealership">
</div>
</div>
</td>
</tr>
</table>
<div id="map_canvas"> </div>
<form name="direction_form" onSubmit="get_directions(); return false;" class="form">
<span style="font-size:18px; font-weight:bold;">Need directions?</span>
<br />
<span style="font-size:14px; margin-top:7px;">Enter your address below to get turn-by-turn directions:</span>
<br />
<input type="text" name="from_address" class="form-field" />
<input type="submit" value="Get Directions" class="form-submit" style="margin-left:10px;" />
</form>
<a name="directions_table"> </a>
<div id="directions"> </div>
</div>
<div class="footer-fix"> </div>
Problema: de todos modos, como puede ver en el código, primero estoy configurando todas las variables (incluidos customerName y customerAddress, que son las más importantes en este caso). Luego tengo cuatro funciones y al final del script inicializo el mapa. Todo funciona excepto dos cosas en la página html. Hay un "onClick" para centrar el mapa que no funciona y el envío del formulario no funciona.
Creo que esto se debe a que tengo las funciones establecidas dentro delready manipulador. Me han dicho que necesito vincular las funciones a sus eventos dentro de ese controlador tal como lo hice con initialize_map. He intentado hacer esto, pero todo lo que intento no funciona. Nota al margen y consejo útil tal vez:show_address se ejecuta inmediatamente para iniciar el mapa cuando llamoinitialize_map; sin embargo, también es lo que se supone que debe llamarse cuando hace clic en el botón "Mapa central en el concesionario".get_directions solo se llama cuando envía el formulario.
A partir de ahora, todo aparece justo cuando se carga la página; sin embargo, cuando hago clic en "Centrar mapa en concesionario" o envío el formulario, aparece un error de JavaScript que me indica que la función no está definida.
Estoy parado con esto. No estoy seguro de cómo hacer que esto funcione correctamente. Cualquier ayuda es muy apreciada. ¡Gracias!