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