Monday, February 24, 2014

Solved : Google Map API Get the error - Cannot read property 'value' of null

I have the following JavaScript file, if I comment the file, there will be no error.


// <!-- This code tells the browser to execute the "Initialize" method only when the complete document model has been loaded. -->
$(document).ready(function () {


    var geocoder;
    var map;

    var componentForm = {
        street_number: 'short_name',
        route: 'long_name',
        locality: 'long_name',
        administrative_area_level_1: 'short_name',
        country: 'long_name',
        postal_code: 'short_name'
    };

    var options = {
        //  types: ['(cities)']
        types: ['geocode'] //this should work !
    };

    var input = document.getElementById('Address');
    var dlCountry = document.getElementById('Country');
    //alert(input.id);
    var autocomplete = new google.maps.places.Autocomplete(input, options);
    google.maps.event.addListener(autocomplete, 'place_changed', function () {
        var place = autocomplete.getPlace();
        //alert('place');
        //// Get each component of the address from the place details
        //// and fill the corresponding field on the form.
        var addressNoCountry = '';
        for (var i = 0; i < place.address_components.length; i++) {
            var addressType = place.address_components[i].types[0];
            if (componentForm[addressType]) {
                var val = place.address_components[i][componentForm[addressType]];
                if (addressType != 'country') {
                    //alert('i='+i+':'+val +'-1-'+ addressType +'-2-'+ componentForm[addressType]);

                    if (addressNoCountry == '')
                    { addressNoCountry = val; }
                    else
                    {
                        if (addressType == 'route')
                        { addressNoCountry = addressNoCountry + ' ' + val; }
                        else
                            addressNoCountry = addressNoCountry + ', ' + val;
                    }
                    //$('#SearchLocation').val(val);
                    //document.getElementById(addressType).value = val;
                }
                else {
                    $("#hidCountry").val(val);
                }
            }
        }
        //alert(addressNoCountry);
        $("#hidAddress").val(addressNoCountry);
        //alert($("#hidCountry").val());
        $("#Country").val($("#hidCountry").val());
        //dlCountry.val(addressNoCountry);
        LoadAddress();
    });

    onMapLoaded();
});

function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var mapOptions = {
        zoom: 8,
        center: latlng
    }
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    //alert(map);
}

function onMapLoaded() {
    //alert("1");
    $("#Address").blur(function (evt) {
        LoadAddress();

    });

}

function LoadAddress() {
    var address = jQuery.trim($("#Address").val());
    if (address.length < 1)
        return;
    //alert(address);

    //map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    //alert(map);
    geocoder.geocode({ 'address': address }, function (results, status) {
        //alert(status);
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            //alert(results[0].geometry.location.lat());
            // $("#Location").val(results[0].geometry.location);
            var geolocation = results[0].geometry.location;
            $("#Location").val(geolocation.lat() + "," + geolocation.lng());
            //alert($("#Location").val());
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
}

No comments:

Post a Comment