Geolocation. Ενα νεο χαρακτηριστικο των browser που η html5 αγαπαει! (Javascript Api)
Ας μιλησουμε λιγο σημερα για ενα νεο χαρακτηριστικο που διαθετουν ολες οι τελευταιες εκδοσεις browser και ονομαζεται Geolocation. Οπως ισως θα καταλαβατε και απο το ονομα προκειται για ενα feature που μπορει να μας δινει τις συντεταγμενες. Θα μου πειτε αυτο πως μπορει να γινει στους υπολογιστες; Απλο , μεσω της Ip address. Στις mobile συσκευες βεβαια γινεται η χρηση του wi-fi ή του gps. Oι συντεταγμενες στις οποιες αναφερομαι ειναι το latitude και το longitude. Θα δουμε λοιπον πως πολυ ευκολα μπορουμε να αποκτησουμε αυτη την πληροφορια και να την περασουμε πχ στο Google maps. Περισσοτερες πληροφοριες σχετικα με το Geolocation μπορειτε να βρειτεεδω.
Ξεκιναμε με τα κλασικα tags της Html και προσθετουμε σε script tag το παρακατω link το οποιο θα μας βοηθησει για τον χαρτη αργοτερα.
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
Αρχικα ελεγχουμε εαν ο broswer μας εχει αυτo το χαρακτηριστικο μεσω ενος if
if (navigator.geolocation)
Εαν ναι τοτε δημιουργουμε την function displayPosition που ζηταει και παιρνει τις συντεταγμενες απο τον browser. Σε αυτη προσθεσα και οτι χρειαζεται για το Google maps οπως οι επιλογες του χαρτη κλπ.
function displayPosition(position) {
var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
options = {
zoom: 11,
center: point,
mapTypeId: google.maps.MapTypeId.HYBRID
},
mapbox = document.getElementById("mapbox"),
map = new google.maps.Map(mapbox, options),
marker = new google.maps.Marker({
position: point,
map: map,
title: "You are here"
});
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var text = document.getElementById("location");
text.innerHTML = "You are at Latitude: " + latitude + ", Longitude: " + longitude;
}
Kαι τελος στο getCurrentPosition (που ειναι το πιο σημαντικο κοματι) περναμε την function που φτιαξαμε προηγουμενως. Προσθεστε ενα stylesheet με τις δικες σας ρυθμισεις για το πως να εμφανιστει ο χαρτης και ειστε ετοιμοι.
Ολοκληρος ο κωδικα θα πρεπει να ειναι καπως ετσι:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Where am I?</title>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script>
if (navigator.geolocation) {
function displayPosition(position) {
var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
options = {
zoom: 11,
center: point,
mapTypeId: google.maps.MapTypeId.HYBRID
},
mapbox = document.getElementById("mapbox"),
map = new google.maps.Map(mapbox, options),
marker = new google.maps.Marker({
position: point,
map: map,
title: "You are here"
});
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var text = document.getElementById("location");
text.innerHTML = "You are at Latitude: " + latitude + ", Longitude: " + longitude;
}
navigator.geolocation.getCurrentPosition(displayPosition);
}
</script>
<style>
#mapbox {width:600px;
height:400px;
border:1px solid;
margin:auto;}
#location
{margin:auto;
text-align:center;}
</style>
</head>
<body>
<div id="location"></div>
<div id="mapbox"></div>
</body>
</html>
Βοηθεια σχετικα με τις ρυθμισεις και γενικα τις επιλογες του google maps μπορειτε να βρειτε εδω. Μπορειτε να δειτε ενα demo εδω