Ticker

6/recent/ticker-posts

Header Ads Widget

Cara Membuat Google Map dengan Animation Bounce Pada Marker

Assalmualaikum Warahmatullahi Wabarakatu
Bismillahirrahmanirrahiim

Pada postingan ini saya akan membahas tips Cara Membuat Google Map dengan Animation Bounce Pada Marker, sebelum ketutorialnya ada baiknya kalau kita mengetahui terlebih dahulu apa itu maskud dengan Map?



Map (peta) merupakan salah satu media untuk mengetahui letak suatu tempat di permukaan bumi. Selain untuk mengetahui lokasi, peta juga dapat digunakan untuk analisis wilayah yang diterangkan dalam jenis peta tematik.

Setelah mengetahui definisi peta, langsung saja kita membuat peta dengan anmiasi bounce.

Langkah Pertama
Buatalah file dengan nama map.html, kemudian ketikalah kode dibawah ini.

<!DOCTYPE html>
<html>
<head>
    <title>Google Map With Animation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
      #map-canvas {
        width: 100%;
        height: 97vh;
      }
    </style>
</head>
<body>
            
<div id="map-canvas"></div>
    
<!--Google Maps API-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDnycWatbGyK6ldFqErjFtko1yeMclNUOA&amp;sensor=true"></script>
<script>
function init_map() {
  var var_location = new google.maps.LatLng(3.570459, 98.666290);
    var var_mapoptions = {
    center: var_location,
    zoom: 17,
    };
  var var_marker = new google.maps.Marker({
      position: var_location,
      map: var_map,
      animation: google.maps.Animation.DROP,
      title:"Hermes"});
    var var_map = new google.maps.Map(document.getElementById("map-canvas"),var_mapoptions);
    var_marker.setMap(var_map);
    var_marker.setAnimation(google.maps.Animation.BOUNCE);  
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
</body>
</html>

Langkah Kedua
Jalankanlah script diatas, agar script diatas berjalan dengan baik sobat harus terhubung keinternet, jika semuanya berjalan lancar akan terlihat gambar seperti dibawah ini.



Perlu diketahui bahwa sekarang google map akan error jika sobat tidak mensertakan api key pada script map yang sobat gunakan, perhatikan pada script map js diatas sobat akan melihat ?key=AIzaSyDnycWatbGyK6ldFqErjFtko1yeMclNUOA&sensor=true, ini merupakan api key google map, sobat harus mendapatkan api key tersebut dari google caranya sobat bisa googling dulu karena saya belum membuat tutorialnya. Jika sobat tidak menyertakan api key google map maka map sobat akan error seperti gambar dibawah ini




Kalau sobat ingin melihat demo dari map diatas silahkan klik pada button demo yang ada dibawah postingan ini, jika ada kesalahan atau error bisa disampaikan melalui kolom komentar. Semoga tutorial tips ini bermanfaat bagi sobat, atas segala kekuranganya mohon dimaafkan.

Post a Comment

0 Comments

Rekomendasi Untuk Anda × +