Geocoding using Google Maps and jQuery

1

I created a slash for the user to enter the desired destination location. This address is captured by the function click() of jQuery .

Until that point the code is working, but for some reason the API geodecoding function is not working.

JavaScript:

var map;
var startPoint;
var endPoint;
var geocoder;

/****************************************************   
    gets user's location to set up starPoint and
    displays google maps
/****************************************************/

function initialize() {  
    var marker = null;
    var geoMarker = null;
    directionsDisplay = new google.maps.DirectionsRenderer(); 

    /****************************************************
        defines user's start location
    /****************************************************/
    var mapOptions = {                                                                                                                                    
        zoom: 16,
        panControl: true                                                                
    }

    map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

    if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            startPoint = new google.maps.LatLng(position.coords.latitude,
                                   position.coords.longitude);

            map.setCenter(startPoint);

            /****************************************************   
                mark on the map user's current position
            /****************************************************/
            // marker = new google.maps.Marker( {                                               
                // position: startPoint,                
                // map: map,                                                                    
                // title: "startPoint",
                // zIndex: 1

            // });   

            geoMarker = new GeolocationMarker(map);
            geoMarker.setMinimumAccuracy(100);

        }, function() {
            handleNoGeolocation(true);
        });
    } 
    else {
        handleNoGeolocation(false);
    }   
}       

function handleNoGeolocation(errorFlag) {
    if (errorFlag) {
        alert('Error: The Geolocation service failed.');
    } else {
        alert('Error: Your browser doesn\'t support geolocation.');
    }
}

$(document).ready(function(){
    initialize(); // Esta função inicializa o mapa.

    $("#searchButton").click(function() {
        if ($("#address").val() != "") {
            geocoder = new google.maps.Geocoder();
            endPoint = $("#address").val();
            geocoder.geocode({address: endPoint}, function(result, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    alert("geocode ok");
                }
            });
        }
    });
});

In the callback function, I test if geodecoding worked, which never happens.

HTML:

<body>
    <div id="form">
        <form name="addressBar" method="post" action="teste.html" style="z-index: 1">
            <fieldset> 
                <div class="fields">
                    <label for="">Address:</label> 
                    <input type="text" name="addressBar" id="address">
                    <input type="image" name="searchButton" id="searchButton" 
                    src="img/searchButton.jpg">
                </div>
            </fieldset>
        </form>
    </div>
    <div id="map-canvas" style="position: absolute; top: 0; width: 100%; height: 100%; z-index: 0">
    </div>
</body>
    
asked by anonymous 11.06.2015 / 23:03

0 answers