Geolokasi biasa dikenal juga dengan browsing sadar-lokasi merupakan istilah yang digunakan untuk menggambarkan kemampuan mendeteksi dan mencatat dimana Anda dan orang lain berada. Informasi geolokasi dapat diperoleh melalui data alamat IP pengguna, alamat MAC (Media Access Control), RFID (Radio-frequency identification), lokasi koneksi Wi-Fi, atau koordinat GPS( Global Positioning System).
Membuat geolocation sederhana
<!DOCTYPE html>
<html>
<head>
<title>Layanan Geolocation</title>
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no”>
<meta charset=”utf-8″>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: ‘Roboto’,’sans-serif’;
line-height: 30px;
padding-left: 10px;
}
</style>
</head>
<body>
<div id=”floating-panel”>
<input id=”address” type=”textbox” value=”Medan, Indonesia”>
<input id=”submit” type=”button” value=”Geolokasi”>
</div>
<div id=”map”></div>
<script>
function inisialpeta() {
var map = new google.maps.Map(document.getElementById(‘map’), {
zoom: 8,
center: {lat:3.597031, lng: 98.678513}
});
var geocoder = new google.maps.Geocoder();
document.getElementById(‘submit’).addEventListener(‘click’, function() {
geocodeAddress(geocoder, map);
});
}
function geocodeAddress(geocoder, resultsMap) {
var address = document.getElementById(‘address’).value;
geocoder.geocode({‘address’: address}, function(results, status) {
if (status === ‘OK’) {
resultsMap.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: resultsMap,
position: results[0].geometry.location
});
} else {
alert(‘Geolokasi tidak berhasil menampilkan hasil: ‘ + status);
}
});
}
</script>
<script async defer
src=”https://maps.googleapis.com/maps/api/js?key=AIzaSyAb36UDFNyO28ZX0Bi7lfRFMZLHCRsS8hc&callback=inisialpeta”>
</script>
</body>
</html>