Bahan yang harus ada :
1. Xampp (saya memakai XAMPP Control Panel v3.2.1)
2. Web Browser (saya memakai mozilla firefox)
3. Editor (saya menggunakan Notepad++/Sublime Text)
4. Koneksi Internet
Langkah - Langkah :
1. Harus punya email gmail, kalau belum sign up. kalau sudah daftar ataupun punya silahkan sign in.
2. Lalu Setelah Sign in Buka Web https://console.developers.google.com
3. Create project (nama terserah)
4. lalu buka APIs & auth --> Credentials --> Add credentials --> API Key --> Browser Key --> isi name saja biarkan Accept requests from these HTTP referrers (web sites) kosong karena optional --> create --> lalu akan mendapatkan API Key
nb : harus ada api key, kalau 1-4 tidak diikuti maka peta tidak bisa jalan tanpa API Key.
5. Simpan API Key
Tema yang pertama adalah :
Marker (Penanda Tempat)
1. Coding di editor :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Marker Animations</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// The following example creates a marker in Stockholm, Sweden using a DROP
// animation. Clicking on the marker will toggle the animation between a BOUNCE
// animation and no animation.
var marker;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 18,
center: {lat: -7.950749, lng: 112.608262}
});
marker = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: {lat: -7.950749, lng: 112.608262}
});
marker.addListener('click', toggleBounce);
}
function toggleBounce() {
if (marker.getAnimation() !== null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=keyanda&signed_in=true&callback=initMap"></script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Marker Animations</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// The following example creates a marker in Stockholm, Sweden using a DROP
// animation. Clicking on the marker will toggle the animation between a BOUNCE
// animation and no animation.
var marker;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 18,
center: {lat: -7.950749, lng: 112.608262}
});
marker = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: {lat: -7.950749, lng: 112.608262}
});
marker.addListener('click', toggleBounce);
}
function toggleBounce() {
if (marker.getAnimation() !== null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=keyanda&signed_in=true&callback=initMap"></script>
</body>
</html>
2. edit keyanda dengan key yang anda daftar tadi
3. simpan file di htdocs dengan nama terserah format html
4. lalu panggil di web browser dengan mengetikkan localhost/namafolderanda/namafileanda.html
5. dan jadilah :
bila ada error komentar ya ! ^_^ terima kasih
