Mendeteksi lokasi dan menampilkan di peta google map dengan geolocation api dan HTML5

geolocation-browser-endang

Geolocation adalah proses mencari lokasi pengguna browser yang terkoneksi internet dengan menggunakan HTML 5 dan Google Maps api kemudian menampilkan lokasi keberadaannya di dalam peta di web.

Agar dapat berjalan, pengguna harus mengaktifkan pelacakan berfungsi dibrowser. adapun browser yang mendukung untuk fungsi ini diantaranya adalah

Chrome: > 5.0
Internet Explorer: > 9.0
Firefox: > 3.5
Safari: > 5.0
Opera: > 16.0

Selain itu, agar dapat menggunakan script api dari google map, anda harus membuat keys di google api untuk dapat menggunakan script tersebut.

Berikut contoh sederhana untuk penggunaan geolocation.

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no”>
<meta charset=”utf-8″>
<title>Geolocation</title>
<style>
#map {
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<!– placeholder map –>

<!– javascript –>
http://maps.google.com/maps/api/js?key=AIzaSyCDOCykF1KHEVDf-oN0BPS40JxVlOk71O4

// set geolocation
var x = navigator.geolocation;
x.getCurrentPosition(success, failure);

// function get current position success
function success(position){
var myLat = position.coords.latitude;
var myLong = position.coords.longitude;

// set latitude and longitude
var coords = new google.maps.LatLng(myLat, myLong);

// set map option
var mapOptions = {
zoom: 16,
center: coords,
mapTypeId: google.maps.MapTypeId.ROADMAP
}

// generate map google
var map = new google.maps.Map(document.getElementById(“map”), mapOptions);

// marker position
var marker = new google.maps.Marker({map: map, position: coords});
}

// function get current position fail
function failure(){
alert(‘geolocation failure!’);
}

</body>
</html>

Hasil tampilan gambarnya seperti dibawah ini.

geolocation-endang

untuk referensi silahkan kunjungi :

https://developers.google.com/maps/documentation/javascript/tutorial

sekian, mudah-mudahan informasi ini bermanfaat, terimakasih.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s