Question

I am getting a function not defined error with my jquery script and i’m not sure why.

JQuery Code:
http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAhTrgZ5jvdqcEQouEpPcZ_hS81NmJwGXlxuJr8lEEo4Njw3WRVhT8auzZb55JSMDkwIaCdNkPHL5gNg” type=”text/javascript”>

<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>

Code from the HTML page:

<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;">&nbsp;&nbsp;</span>
                        <br />
                        <span class="placeholderAddress" style="font-size:14px; font-weight:bold; line-height:22px;">&nbsp;&nbsp;</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">&nbsp;&nbsp;</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">&nbsp;&nbsp;</a>
    <div id="directions">&nbsp;&nbsp;</div>
</div>
<div class="footer-fix">&nbsp;&nbsp;</div>

​

Problem:
Anyway, as you can see in the code i am first setting all of the variables (including the customerName and customerAddress, which are the most important in this case). Then i have four functions and at the end of the script i initialize the map. Everything works except for two things on the html page. There is an “onClick” to center the map that is not working and the form submit does not work.

I believe this is because i have the functions set inside the ready handler. I have been told that i need to bind the functions to their events within that handler just as i have with initialize_map. I have tried to do this but everything i try does not work. Side note and helpful tip maybe: show_address runs immediately to start the map when i call initialize_map; however, it is also what is supposed to be called when you click the button “Center Map on Dealership”. get_directions is only called when you submit the form.

As of now everything shows up right when the page loads; however, when i click on “Center map on Dealership” or submit the form i get a javascript error that is telling me that the function is not defined.

I am at a standstill with this. Not sure how to get this functioning properly. Any help is greatly appreciated. Thanks!

Answer 1

It’s because your show_address and get_directions are defined only inside that document.ready handler’s scope, you need to move the functions outside there if you want to call them via inline script.