1
I created a bar for the user to enter the desired destination location. This address is captured through the function click() of jQuery.
At this point the code is working, but for some reason, the API’s 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 role of callback, test whether 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>
Which error does it make? you are sure that the code even calls the maps api?
– PauloHDSousa
Yes it calls. I can create the map and mark a reference point. The error is that the geo-decoding function does not work.
– absentia
What you mean by "geodecoding function does not work"?
– PauloHDSousa
It should display `Alert("geocode ok") but the callback is not called.
– absentia
And if you give an Alert in status?
– PauloHDSousa
Still the same. Looks like she’s not calling the callback.
– absentia
I tried to run the code from 3 different mammoths: Jsfiddle, Apache server (XAMMP) and double-click the HTML file. Among the 3 only Fiddle exhibited Alert. Follow the link [Jsfiddle] (http://jsfiddle.net/BrunoXL/koa08gbq/2/)
– absentia