Sekarang saya akan membuat tutorial cara membuat peta dengan menggunakan feature dari google yakni google maps, mungkin ini akan membantu buat para developer yang memiliki project dengan membuat sebuah peta pada browser. untuk menampilkan peta anda harus memiliki sebuah API KEY yang bisa anda buat disini Cara Membuat API KEY Google Maps Javascript. berikut tutorialnya.
1. Buatlah sebuah file maps.html lalu ketikan script dibawah ini:
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script>
function initMap() {
var lokasi_saya= {lat: -6.591778, lng: 106.805965};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: lokasi_saya
});
var marker = new google.maps.Marker({
position: lokasi_saya,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
3. Ini adalah {lat: -6.591778, lng: 106.805965} lokasi titik kordinat anda bisa anda ubah sesuai selera.
4. Untuk menjalankannya pastikan anda terhubung akses Internet. dan jika berhasil akan tampil seperti ini.
Selamat anda berhasil membuat sebuah peta pada project anda.
Demo
2. Ubahlah YOUR_API_KEY dengan kode IP key anda yang sudah dibuat, jika salah atau kosong IP key nya maka google maps tidak akan muncul, dan akan tampil seperti ini. Bgaimana menentukan IP KEY NYA
BalasHapus