Dag bloglezers,
zoals beloofd heb ik vandaag eens de geolocation uitgetest met Google Maps. Ik vind het iets simpeler om met Google Maps te werken. Het heeft even geduurd tegen dat ik een bruikbaar voorbeeld vond, maar het is me uiteindelijk dan toch gelukt!
Hieronder de code:
<!DOCTYPE html>
<html>
<head>
<title>Google Maps voorbeeld met Geolocation</title>
</head>
<body>
<script src="http://www.google.com/jsapi?key=ABQIAAAAWvvIYRs1VShGWOvhXFtQcxSlZpBiPmeDnhhJ4mwvo4hrmPZCsxR5B-XTR-p6O_lhwgS2-ro2-S9yTA"></script>
<script>
(function () {
google.load("maps", "2");
google.setOnLoadCallback(function () {
// Maak de kaart aan
var map = new google.maps.Map2(document.getElementById("map")),
markerText = "<h2>Jij bent hier</h2><p>Gevonden via Geolocation</p>",
markOutLocation = function (lat, long) {
var latLong = new google.maps.LatLng(lat, long),
marker = new google.maps.Marker(latLong);
map.setCenter(latLong, 16); //stel zoomniveau in
map.addOverlay(marker);
marker.openInfoWindow(markerText);
google.maps.Event.addListener(marker, "click", function () {
marker.openInfoWindow(markerText);
});
};
map.setUIToDefault();
// Controleer of geolocation ondersteund wordt
if (navigator.geolocation) {
// Vraag de positie
navigator.geolocation.getCurrentPosition(function (position) {
// gelukt
markOutLocation(position.coords.latitude, position.coords.longitude);
},
function () {
// Mislukt, je bent in centrum brussel geplaatst
markerText = "<p>Accepteer geolocation als je wil dat je gevonden wordt.<br>Je bent nu in Brussel geplaatst.</p>";
markOutLocation(50.85034, 4.35171);
}
);
}
else {
// Probleem bij opvragen van positie
markerText = "<p>Geolocation is mislukt.</p>";
markOutLocation(50.85034, 4.35171);
}
});
})();
</script>
<div id="map" style="height:800px"></div>
</body>
</html>Let wel, net zoals bij Bing MAps moet je een geldige API code ingeven, deze kan je bekomen via <a href="http://code.google.com/apis/maps/signup.html">http://code.google.com/apis/maps/signup.html</a>.
Mijn werkend voorbeeld kan je bekijken door hier te klikken!
