Een kleien tool dat ik een paar jaar geleden gemaakt heb als case om de Google API onder de knie te krijgen.
demo: http://www.parhasard.be/tutorials/demo/geocoding/
Ik wil niet alle pluimen in mijn gat steken want ik heb dit niet van scratch geschreven. Probleem is dat ik niet meer weet waar ik het origineel gevonden had.
HTML
<body onload="initialize()"> <form> <input type="text" id="address"> <input type="button" value="Click me to search" onclick="geocode()"> <input type="reset" value="Reset"> </form> <span class="label">Lat: </span><span id="lat" class="results"></span> <span class="label">Lng: </span><span id="lng" class="results"></span> <span class="label">Address: </span><span id="formatedAddress" class="results"></span> <div id="map"> <div id="map_canvas"> </div> <div id="crosshair"></div>
Script
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
// <![CDATA[
var map;
var geocoder;
var reverseGeocodedLast;
var currentReverseGeocodeResponse;
function initialize() {
var latlng = new google.maps.LatLng(50.866518,3.432109);
var myOptions = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
geocoder = new google.maps.Geocoder();
setupEvents();
centerChanged();
}
function setupEvents() {
reverseGeocodedLast = new Date();
centerChangedLast = new Date();
setInterval(function() {
if((new Date()).getSeconds() - centerChangedLast.getSeconds() > 1) {
if(reverseGeocodedLast.getTime() < centerChangedLast.getTime()) reverseGeocode(); } }, 1000);
google.maps.event.addListener(map, 'center_changed', centerChanged);
google.maps.event.addDomListener(document.getElementById('crosshair'),'dblclick', function() {
map.setZoom(map.getZoom() + 1);
});
}
function getCenterLatLngText() {
var mapgetCenterlat = map.getCenter().lat();
var mapgetCenterlng = map.getCenter().lng();
mapgetCenterlat = Math.round (mapgetCenterlat*1000000) / 1000000
mapgetCenterlng = Math.round (mapgetCenterlng*1000000) / 1000000
document.getElementById('lat').innerHTML = mapgetCenterlat;
document.getElementById('lng').innerHTML = mapgetCenterlng;
return '(' + mapgetCenterlat +', '+ mapgetCenterlng + ')';
}
function centerChanged() {
centerChangedLast = new Date();
var latlng = getCenterLatLngText();
document.getElementById('formatedAddress').innerHTML = '';
currentReverseGeocodeResponse = null;
}
function reverseGeocode() {
reverseGeocodedLast = new Date();
geocoder.geocode({latLng:map.getCenter()},reverseGeocodeResult);
}
function reverseGeocodeResult(results, status) {
currentReverseGeocodeResponse = results;
if(status == 'OK') {
if(results.length == 0) {
document.getElementById('formatedAddress').innerHTML = 'None';
}
else {
document.getElementById('formatedAddress').innerHTML = results[0].formatted_address;
}
}
else {
document.getElementById('formatedAddress').innerHTML = 'Error';
}
}
function geocode() {
var address = document.getElementById("address").value;
geocoder.geocode({ 'address': address, 'partialmatch': true}, geocodeResult);
}
function geocodeResult(results, status) {
if (status == 'OK' && results.length > 0) {
map.fitBounds(results[0].geometry.viewport);
addMarkerAtCenter();
}
else {
alert("Geocode was not successful for the following reason: " + status);
}
}
function addMarkerAtCenter() {
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map
});
var text = 'Lat/Lng: ' + getCenterLatLngText();
if(currentReverseGeocodeResponse) {
var addr = '';
if(currentReverseGeocodeResponse.size == 0) {
addr = 'None';
}
else {
addr = currentReverseGeocodeResponse[0].formatted_address;
}
text = text + '' + 'address:' + addr;
}
var infowindow = new google.maps.InfoWindow({ content: text });
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
} // ]]>
</script>
Par Hasard
Ik ben 40+, met een gezonde internet verslaving. Gelukkig getrouwd en fiere vader van 2 dochters. Wil een kat in huis, maar mag niet. 🙁
Latest posts by Par Hasard (see all)
- jQuery.ScrollTo werkt niet meer in Chrome - 25 oktober 2017
- Easter egg Google Chrome: T-Rex runner game - 7 augustus 2015
- Hoe input en select form element even breed maken? - 21 mei 2015
