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>