Função não definida
Estou recebendo um erro de função não definida com meu script jquery e não sei por que.
Código JQuery: http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAhTrgZ5jvdqcEQouEpPcZ_hS81NmJwGXlxuJr8lEEo4Njw3WRVhT8auzZb55JSMDkw ""
<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 da 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 qualquer forma, como você pode ver no código, estou definindo primeiro todas as variáveis (incluindo o customerName e o customerAddress, que são os mais importantes nesse caso). Então eu tenho quatro funções e no final do script eu inicializo o mapa. Tudo funciona, exceto por duas coisas na página html. Há um "onClick" para centralizar o mapa que não está funcionando e o envio do formulário não funciona.
Eu acredito que isso é porque eu tenho as funções definidas dentro doready manipulador. Foi-me dito que eu preciso vincular as funções aos seus eventos nesse manipulador, assim como eu fiz com o initialize_map. Eu tentei fazer isso, mas tudo que eu tento não funciona. Nota lateral e dica útil, talvez:show_address corre imediatamente para iniciar o mapa quando eu ligoinitialize_map; no entanto, é também o que deve ser chamado quando você clica no botão "Centralizar mapa no concessionário".get_directions é chamado somente quando você envia o formulário.
A partir de agora tudo aparece exatamente quando a página é carregada; no entanto, quando clico em "Centralizar mapa na concessionária" ou envia o formulário, recebo um erro de javascript que está me dizendo que a função não está definida.
Estou parado com isso. Não tenho certeza de como fazer isso funcionar corretamente. Qualquer ajuda é muito apreciada. Obrigado!