MENU

Joomla Tips en trucs

In HTML5 zit er meer functionaliteit ingebouwd om plaatsbepalingen ofwel geolocatie (geolocation) te doen via de browser. Dit brengt uiteraard een hoop extra mogelijkheden met zich mee. Zeker ook voor de mobiele toepassingen. Plaatsbepaling wordt zo een stuk makkelijker.

Uiteraard moet de bezoeker toestemming geven om zijn of haar locatie te laten bepalen (dit gebeurd dan door of ip-adres of GPS). Op de Google Map ziet u waar de pagina denkt dat u bent. Niet helemaal waterdicht, maar vaak redelijk accuraat. Indien u op lees verder klikt... Vergeet geen toestemming te geven zometeen om uw locatie te bepalen (werkt niet in oudere browsers).

jQuery en HTML5 Geolocatie (geolocation)


Een voorbeeld hiervan ziet u hieronder. Gemaakt met jQuery en html5.



Hiervoor is uiteraard de jQuery library nodig. Maar deze kun je automatisch laten downloaden via Google met:

{code}<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>{/code}

Voordelen van het laden via Google:

  • Indien anderen een andere website hebben bezocht die dezelfde link naar jQuery gebruikte, dan staat de jQuery library al in de cache

Nadeel van het laden via Google:

  • Indien Google 'down' is dan laadt hij het script niet en werkt dit onderdeel niet

De jQuerycode die je nodig hebt ziet er ongeveer zo uit en is gemaakt door Anton Junaidi:

{code}
var initial;
var browserSupport = new Boolean();
var curmarker = new google.maps.Marker();
var geocoder;
var map;


function contentInfo(initial){
//marker
curmarker.setMap();
curmarker = new google.maps.Marker({
position : initial,
map : map,
icon : 'icoontje.png',
title : 'Gebruiker'
});

//content
var content = '<div id="current">U bevind zich hier.</div>';
var info = new google.maps.InfoWindow({
content : content
});
google.maps.event.addListener(curmarker,'click',function(){
info.open(map,curmarker);
});
}

// function search location in first load.
function mapsSearch(position){
//search position
initial = new google.maps.LatLng(position.coords.latitude , position.coords.longitude);
//put in current position
map.setCenter(initial);

contentInfo(initial)

//note about location
geocoder.geocode({
'latLng' : initial
},function(results,status){
if (status == google.maps.GeocoderStatus.OK){
if (results[1]){
$("#currLoc , #currLocaBased").html(results[0].formatted_address);
}
}
});
}

// load
function ini(){
var myOptions = {
zoom : 16,
mapTypeId : google.maps.MapTypeId.ROADMAP,
mapTypeControl : false,
navigationControl : true,
navigationControlOptions : {
style : google.maps.NavigationControlStyle.ANDROID,
position : google.maps.ControlPosition.TOP_RIGHT
}
};

map = new google.maps.Map($("#map")[0],myOptions);

geocoder = new google.maps.Geocoder();

if (navigator.geolocation){

browserSupport = true;
navigator.geolocation.getCurrentPosition(function(position){
mapsSearch(position);
},function(){
handleNoGeolocation(browserSupport);
});

}else if (google.gears){

browserSupport = true;
var geo = google.gears.factory.create('beta.geolocation');
geo.getCurrentPosition(function(position){
mapsSearch(position);
},function(){
handleNoGeolocation(browserSupport);
});

}else{

browserSupport = true;
handleNoGeolocation(browserSupport);

}


function handleNoGeolocation(browserSupport){
if (error == true){
alert('Something error in Geolocation API.');
}else{
alert('Something error in your browser (your browser is not HTML5 Geolocation).');
}
}


}


//find your location
function showLocation(){
var address = $("#inputLocation").val();
if (geocoder){

geocoder.geocode({
'address' : address
},function(results,status){
if (status == google.maps.GeocoderStatus.OK){
map.setCenter(results[0].geometry.location);

//info
contentInfo(results[0].geometry.location);

//note about location
geocoder.geocode({
'latLng' : results[0].geometry.location
},function(results,status){
if (status == google.maps.GeocoderStatus.OK){
if (results[1]){
$("#currLoc").html(results[0].formatted_address);
}
}
});


}else{
alert('Something error in your location.');
}
});

}
}
{/code}