Cara Membuat Marker Maps Dengan Google maps API

Hallo teman-teman DUMET School, pada kesempatan kali ini saya akan membahas tentang Cara Membuat Marker Maps Dengan Google maps API. Marker maps adalah suatu tanda yang di pasang di dalam sebuah maps atau peta sebagai petanda lokasi atau tempat. Dimana pada kesempatan kali ini kita akan membuat marker maps menggunakan maps api. API adalah kependekan dari Application programming interface. Dimana didalam API terdapat fungsi - fungsi  pemrograman yang disediakan oleh aplikasi atau layanan agar layananan tersebut bisa di integrasikan atau digunakan untuk sebuah aplikasi yang akan kita buat. Google maps API adalah fungsi - fungsi pemrograman yang disediakan oleh Google maps untuk di integrasikan kedalam sebuah program aplikasi yang akan dibuat. Nah kebetulan pada kesempatan kali ini saya akan menggunakan  Google maps API  untuk membuat marker maps yang nanti akan ditampilkan di sebuah website. 

Langkah pertama teman-teman sematkan link dari Google Maps API seperti pada script di bawah ini dan letakkan didalan tag head html yang teman-teman buat.

<script src="http://maps.googleapis.com/maps/api/js"></script>

Jika sudah maka tahap berikutnya teman-teman bisa siapkan struktur htmlnya untuk meletakkan peta yang akan dibuat seperti berikut ini.

<div id="googleMap" style="width:100%;height:380px;"></div>

Dan terakhir kita akan membuat sebuah fungsi untuk menampilkan maps sesuai posisi atau titik yang kita inginkan begitu juga membuat marker maps sesuai titik atau lokasi yang kita inginkan. Untuk marker maps disini juga kita bisa menggunakan animasi yang sudah disediakan oleh google seperti animasi bounce seperti marker atau pin yang bergerak ke atas atau ke bawah atau juga kita bisa mengubah gambar marker atau pin menjadi bendera. Dan berikut ini scriptnya.

<script>
    function initialize() {
      // Tampilan peta
      var propertiPeta = {
        center:new google.maps.LatLng(-2.3937573,116.7517431),//titik posisi maps di halaman browser
        zoom:5,
        mapTypeId:google.maps.MapTypeId.ROADMAP
      };      
      var peta = new google.maps.Map(document.getElementById("googleMap"), propertiPeta);

      // Membuat Marker Maps
      var marker=new google.maps.Marker({
          position: new google.maps.LatLng(-6.17702,106.7267727),//titik lokasi maps
          map: peta,
          animation: google.maps.Animation.BOUNCE
      });

    }
    // event jendela di-load  
    google.maps.event.addDomListener(window, 'load', initialize);
  </script>

Dan jika dilihat dihalaman browser maka akan seperti pada gambar di bawah ini.

Demikian artikel tentang Cara Membuat Marker Maps Dengan Google maps API. Semoga dapat bermanfaat dan selamat mencoba.