Mudah Menggunakan Marker dan Google Maps!

Contoh Marker

Pada kesempatan kali ini saya akan membuat postingan tentang marker/penanda yang terdapat pada Google Maps. Marker ini berguna untuk menunjukkan posisi sebuah lokasi dalam peta. Jadi saya akan menjelaskan bagaimana caranya agar marker dapat muncul pada posisi yang kita inginkan. Check It Out!

Pertama-tama saya akan menjelaskan struktur dari sebuah marker. Perhatikan penulisan berikut!

var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title:"Hello World!"});

Di atas merupakan cara penulisan sebuah marker. Marker memiliki beberapa parameter yang digunakan untuk mengatur bagaimana perilaku marker tersebut.

1. Membuat marker

var marker = new google.maps.Marker({});

2. Mengatur posisi marker

position: myLatlng,

myLatlng merupakan sebuah variabel yang diisi dengan nilai kordinat yang kita inginkan. Juga dapat ditulis dengan cara

new google.maps.LatLng(-0.9553562, 100.8766657);

-0.9553562, 100.8766657 merupakan posisi Latitude dan Longitude dari objek.

3. Menentukan peta

map: map,

Digunakan untuk menjelaskan pada peta mana marker akan ditampilkan. Juga bisa dituliskan dengan cara berikut

new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

Penulisan tersebut telah dijelaskan pada postingan sebelumnya. (Disini!)

4, Membuat judul marker

 title:"Hello World!"

Judul marker ini akan muncul ketika pointer mouse diarahkan ke marker.

Baiklah, setelah sedikit penjelasan mengenai marker maka saya akan memberikan contoh bagaimana menggunakan marker tersebut. Agar lebih singkat, teman-teman saya asumsikan telah mengerti mengenai dasar pembuatan peta sederhana pada postingan sebelumnya. (Cek Disini!).

Peta Sederhana:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple markers</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
function initialize() {
  var myLatlng = new google.maps.LatLng(-0.9553562, 100.8766657);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
    </script>
  </head>
  <body onload="initialize()">
    <div id="map-canvas"></div>
  </body>
</html>

Tambahkan kode berikut untuk membuat marker

var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title:"Hello World!"});

Sehingga kode script peta sederhana kita menjadi

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple markers</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
function initialize() {
  var myLatlng = new google.maps.LatLng(-0.9553562,100.8766657);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Hello World!'
  });
}
    </script>
  </head>
  <body onload='initialize()'>
    <div id="map-canvas"></div>
  </body>
</html>

Simpan script tersebut dan jalankan peta sederhana tersebut.
Hasil penampakan peta sederhana dengan sentuhan marker.

Map dengan Marker

Dengan demikian, kita telah berhasil memanfaatkan marker pada peta kita. Jika ada yang kurang jelas silahkan bertanya melalui kotak komentar. Terima kasih dan salam olahraga :D

Referensi:
Google. "Markers". Tersedia: https://developers.google.com/maps/documentation/javascript/markers diakses pada 14 September 2014 jam 14.14 WIB

Silent Please!

Mudah Menggunakan Marker dan Google Maps!

Share this:

CONVERSATION

1 komentar: