Geocode an Address in Google Maps Javascript

Hi experts,

I'm using Visual Studio 2010.

I'm trying to create this example:
http://www.wikihow.com/Geocode-an-Address-in-Google-Maps-Javascript

I followed steps 1 through 13.


This is my code for Test.aspx:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Test.aspx.vb" Inherits="Map6.Test" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

<script src="http://maps.google.com/maps/api/js?&sensor=false" type="text/javascript"></script>

<script type="text/javascript" >

    // Add the variable that will store the geocode object
    var geocoder;
    var map;

    function initialize() {

        //Set the geocoder variable equal to an instance of the Google Maps geocoder object as new google.maps.Geocoder()
        geocoder = new google.maps.Geocoder();

        var latlng = new google.maps.LatLng(42.095287, -79.3185139);
        var myOptions = {
            zoom: 10,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    }

    // Add a second function to your javascript code, call it codeAddress. It will not have any values passed to it.
    function codeAddress() {

        // The first line of the function uses getElementById to get the address from the text box and place it into a variable we'll call sAddress.
        var sAddress = document.getElementById("inputTextAaddress").value;
    
        // Call the geocode method of the geocoder object, this will take two passed-in parameters. The first is
        // the GeocoderRequest, this says what kind of request is being made and what the request value is.
        geocoder.geocode({ 'address': sAddress }, function (results, status) {
            
            // The callback function should first check the status value of the callback function. Use an IF statement
            // to test the result, check to see if the status equal google.maps.GeocoderStatus.OK. Also add an
            // ELSE clause to the IF statement as well.
            if (status == google.maps.GeocoderStatus.OK) {

               // If the status equals OK, call the setCenter method of the map object variable. You will pass this 
               // method to get the result's first geometry location.
               map.setCenter(results[0].geometry.location);

               //Next, use the same result geometry location to add a map marker to the map object variable. Create a new 
               //variable – we'll call it oMarker – it will be created as a new google.maps.Marker. The new method takes two 
               //parameters, the first is the map object that you're adding the marker to, and the second is the 
               //position to place the marker, which is again the first results geometry location.
               var marker = new google.maps.Marker({
                   map: map,
                   position: results[0].geometry.location
               });

            } else {

                // Finally we're going to add an alert message to the ELSE to let the user know that the Geocode didn't 
                // work like it should have. You can use the status to give a bit more information rather than just saying 
                // that it didn't work.
                alert("Geocode was not successful for the following reason: " + status);

        });
    }
    
</script>
</head>
<body onload="initialize()">
    <!-- Create a text box inpu for the user to enter the street address -->
    Address: <input type="text" id="inputTextAddress" style="width:200px" title="Address to Geocode"/>
    <!-- Create a button input for the user to click to geocode the address -->
    <input  type="button" onclick="codeAddress()" id="inputButtonGeoCode" style="width:150px" title="Click to Geocode" value="Click to Geocode"/>
    <div id="map_canvas" style="width:100%; height:100%"></div>

</body>
</html>

Open in new window


But when I run my page my map is not working.

Any ideas of what I'm missing or doing wrong?
LVL 1
maqskywalkerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Alexandre SimõesManager / Technology SpecialistCommented:
At least at a first glance you have a problem with the brackets, you're not closing the second function properly.

Try this code instead:
// Add the variable that will store the geocode object
var geocoder;
var map;

function initialize() {

    //Set the geocoder variable equal to an instance of the Google Maps geocoder object as new google.maps.Geocoder()
    geocoder = new google.maps.Geocoder();

    var latlng = new google.maps.LatLng(42.095287, -79.3185139);
    var myOptions = {
        zoom: 10,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

// Add a second function to your javascript code, call it codeAddress. It will not have any values passed to it.
function codeAddress() {

    // The first line of the function uses getElementById to get the address from the text box and place it into a variable we'll call sAddress.
    var sAddress = document.getElementById("inputTextAaddress").value;

    // Call the geocode method of the geocoder object, this will take two passed-in parameters. The first is
    // the GeocoderRequest, this says what kind of request is being made and what the request value is.
    geocoder.geocode({
        'address': sAddress
    }, function (results, status) {

        // The callback function should first check the status value of the callback function. Use an IF statement
        // to test the result, check to see if the status equal google.maps.GeocoderStatus.OK. Also add an
        // ELSE clause to the IF statement as well.
        if (status == google.maps.GeocoderStatus.OK) {

            // If the status equals OK, call the setCenter method of the map object variable. You will pass this 
            // method to get the result's first geometry location.
            map.setCenter(results[0].geometry.location);

            //Next, use the same result geometry location to add a map marker to the map object variable. Create a new 
            //variable – we'll call it oMarker – it will be created as a new google.maps.Marker. The new method takes two 
            //parameters, the first is the map object that you're adding the marker to, and the second is the 
            //position to place the marker, which is again the first results geometry location.
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });

        } else {

            // Finally we're going to add an alert message to the ELSE to let the user know that the Geocode didn't 
            // work like it should have. You can use the status to give a bit more information rather than just saying 
            // that it didn't work.
            alert("Geocode was not successful for the following reason: " + status);

        }
    });
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
GaryCommented:
As well as your bracket closing problems ^^^

You have inputTextAaddress when it should be inputTextAddress
var sAddress = document.getElementById("inputTextAddress").value;

And for the canvas height you need to set a real figure - you cannot use 100%.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.