Displaying a google maps that shows the chosen address

Question

Ok so the user chooses the country, then via autocomplete widgets they get to choose the district, city and area they live in. The the values they've chosen are concatenated into an address which should be used to call the Google Maps API and display a Map that marks the address... Unfortunately, this is not working... I am getting this exception in Firebug:

uncaught exception: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMViewCSS.getComputedStyle]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://maps.gstatic.com/intl/en_us/mapfiles/api-3/4/11a/main.js :: Xk :: line 55" data: no]

Here's my code:

a script tag with this src="http://maps.google.com/maps/api/js?sensor=false"

var address = selectedArea + ', ' + selectedCity + ', ' + selectedDistrict + ', Lebanon';

var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': address }, function (results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        var map = new google.maps.Map($("#addressMap"));
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
    } else {
        alert("Geocode was not successful for the following reason: " + status);
    }
});

So what's going on?

Answer 1

When you create the map object you give a jQuery object but it excepts a DOM object. Try DOM object itself.

I added some options also, zoom level and map type.

Here is the final code:

var address = selectedArea + ', ' + selectedCity + ', ' + selectedDistrict + ', Lebanon';

var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': address }, function (results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        var mapOptions = { zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP };
        var map = new google.maps.Map(document.getElementById('addressMap'), mapOptions);
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
    } else {
        alert("Geocode was not successful for the following reason: " + status);
    }
});