Ringkasan
Tutorial ini menampilkan cara menampilkan lokasi geografis pengguna atau perangkat pada peta Google, dengan menggunakan fitur Geolokasi Google Maps JavaScript API.
Di bawah ini adalah peta yang bisa mengidentifikasi lokasi Anda saat ini.
Contoh berikut menampilkan keseluruhan kode yang Anda perlukan untuk membuat peta ini.
// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see the error "The Geolocation service
// failed.", it means you probably did not give permission for the browser to
// locate you.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 6
});
var infoWindow = new google.maps.InfoWindow({map: map});
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<!-- Replace the value of the key parameter with your own API key. --> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"> </script>
Cobalah sendiri
Arahkan ke atas kanan blok kode untuk menyalin kode atau membukanya dalam JSFiddle.
<!DOCTYPE html>
<html>
<head>
<title>Geolocation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see the error "The Geolocation service
// failed.", it means you probably did not give permission for the browser to
// locate you.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 6
});
var infoWindow = new google.maps.InfoWindow({map: map});
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
Apa yang dimaksud dengan Geolokasi?
Geolokasi merujuk pada identifikasi lokasi geografis pengguna atau perangkat komputasi melalui beragam mekanisme pengumpulan data. Biasanya, sebagian besar layanan geolokasi menggunakan alamat perutean jaringan atau perangkat GPS internal untuk menentukan lokasi ini. Geolokasi adalah API spesifik perangkat. Ini berarti browser atau perangkat harus mendukung geolokasi agar dapat menggunakannya melalui aplikasi web.
Standar Geolokasi W3C
Aplikasi yang ingin melakukan geolokasi harus mendukung standar Geolokasi W3C. Perhatikan, kode contoh di atas menentukan lokasi pengguna melalui properti navigator.geolocation W3C.
Sebagian browser menggunakan alamat IP untuk mendeteksi lokasi pengguna. Akan tetapi, mungkin hanya menyediakan perkiraan kasar dari lokasi pengguna. Pendekatan W3C adalah yang paling mudah dan paling didukung sehingga diprioritaskan atas metode geolokasi lainnya.
Parameter sensor
Google Maps JavaScript API sebelumnya memerlukan parameter sensor untuk menunjukkan apakah aplikasi Anda menggunakan sensor untuk menentukan lokasi pengguna. Parameter ini tidak lagi diperlukan.
Butuh bantuan? Kunjungi