Gmap v3 and js not playing nice

Question

Hello, first of all here is my code in question:

    var geocoder;
    var map;

    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
        zoom: 18,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.HYBRID
    }
    map = new google.maps.Map(document.getElementById("details"), myOptions);

    var q = $("span#address").text() + ' ' + $("span#city").text() + ' ' +$("span#state").text() + ' ' +$("span#zip").text();
    var t = document.getElementById('address').value;
    console.log(t);
    //var city = document.getElementById("home-city").value;
    //console.log(city);
    geocoder.geocode( { 'address': t}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: map,
                //draggable: true,
                position: results[0].geometry.location
            });
        } else {
            console.log("Geocode was not successful for the following reason: " + status);
        }
    });

ok, so my problem is that I can load into geocoder.geocode() a variable like this

var address = "string address";

I want to grab the address from a specific page I have and store the address in a var and then pass that var into Gmaps, and in a perfect world this should work! but it appears there is no such world ;-(

so I did a few test. Interesting enough...

var q = $("span#address").text() + ' ' + $("span#city").text() + ' ' +$("span#state").text() + ' ' +$("span#zip").text();

works when I do a console.log(address) I get the address outputed. But I cannot insert the variable address into geocode because it won't recognize it. Second, I tried the good old regular javascript method and tried to get the val of the element with the only id of address. Firebug AND the geocode error tell me that the value is NULL...

so I'm confused, jQuery can grab the data, but cannot be passed into the geocode. Then regular javascript tells me I'm crazy that there is not data in field I'm trying to reference by id...

anyone gotten a scenario like this to work?

Hmmm, maybe I should mention that I have all this code executed on a jquery live click function. When the user clicks on the map icon all this code is suppose to execute...

Answer 1

• Use comma instead of spaces to separate the values.
• Make sure you only have ONE HTML element with the "address" id.
• When retrieved with getElementById(), use .value to get the value of the element (not .val)

Answer 2

So the problem was that I was declaring the google map first then trying to reference the address information. I moved the var address up to the top before creating a new google map api reference.