--> Skip to main content
Home Bing Maps Map Pemrograman Web Cara Membuat Multiple Pin pada Bing Maps

Cara Membuat Multiple Pin pada Bing Maps


Tutorial Bing Maps kali ini akan membahasa bagaimana caranya membuat multiple pin pada bing maps. Pada tutorial sebelumnya, kita telah membahas dan memberikan contoh pembuatan pin pada bing maps (namun hanya satu pin atau satu marker saja).

Jika membutuhkan tutorial pembuatan pin atau marker pada google maps, silahkan kunjungi tutorial "membuat marker, multiple marker dan memanggil marker dari database pada google maps".

Untuk menggunakan layanan bing maps, kita harus mendapatkan key yang bisa didapatkan secara gratis dengan cara registrasi terlebih dahulu. Untuk proses mendapatkan keynya, dapat anda temukan di tutorial : "Menggunakan layanan Bing Maps".

Berikut ini adalah ouput atau hasil akhir yang diharapkan dalam tutorial kali ini, seperti yang ditunjukkan oleh  gambar dibawah ini :
Create Multiple Pin pada Bing Maps


Langkah-langkah membuat Multiple Pin pada Bing Maps

1. Script untuk Loading Map dari Bing Maps Server
Tujuan dari kode dibawah ini berfungsi  dalam memanggil layanan dari server bing maps. API yang kita gunakan adalah  API bing maps versi 8 :
<script type='text/javascript' 
 src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap' 
 async defer>
</script>


2. Set map options
Pengaturan map options bertujuan dalam memberikan opsi-opsi bagaimana sebuah peta akan ditampilkan. Dalam hal ini sekurang-kurangnya kita endefinisikan key dari Bing Maps dan id yang nantinya peta tersebut akan dipanggil.

Pengaturan map option ini dilakukan dalam fungsi GetMap(). Pada tutorial kali ini kita menggunakan opsi untuk zoom, opsi untuk tipe peta serta opsi kordinat center.
// Seting Map Options
map = new Microsoft.Maps.Map(document.getElementById("#myMap"),
{
 credentials: "U4VD6Xi1NuVkAaN8KvJF~dereRmfzkm5VdVorK5lmlA~Ar4MuDpGzRmqdUtbXYvjm31t06tAU-400GnsVAY8Zna23hb05WjeiHiszdHOEAXU",
 center: new Microsoft.Maps.Location(4.660177, 97.012866), // Kordinat bener meriah
 mapTypeId: Microsoft.Maps.MapTypeId.aerial,
 zoom: 8
});

Jika kita perhatikan kode diatas :
  • Bagian myMap menyatakan id yang nantinya akan dipanggil dengan tag <div id=myMap>
  • Kode credentials menyatakan key dari Bing maps, 
  • Kode mapTypeId menyatakan tipe peta yang akan ditampilkan. Untuk jenis-jenis petanya silahkan baca penjelasan berikut :MapTypeId Enumeration.
  • Kode center menyatakan lokasi kordinat titik tengah ketika peta diload. 
  • Kode zoom menyatakan level peta yang dapat diperbesar.

3. Mengatur jendela infobox berada di tengah pin
Maksud dari langkah ini adalah mengatur jendela atau window dialog berada pada posisi tengah dari pin yang nantinya akan diklik. Jika informasi yang kita buat banyak, maka jendela tersebut akan menyesuaikannya dimana tetap jendelanya berada pada posisi tengah terhadap pin tersebut. Kemudian dilanjutkan dengan mengset infobox pada map pada kode terakhir.
//Membuat jendela infobox berada di tengah pin (tidak ditampilkan)
infobox = new Microsoft.Maps.Infobox(map.getCenter(), {
 visible: false
});
//Assign infobox pada variabel map
infobox.setMap(map);

4. Create pin, metadata pin dan event clicknya
Disini kita akan membuat banyak pin (multiple pin), karena pin yang  digunakan lebih dari satu maka kita akan menggunakan bantuan sebuah fungsi yang kita definisikan sendiri.
// Fungsi create pin, metadata dan event click
function AddData() {
//Create Pin
var pin1 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(3.818570, 96.831841));
//Menyimpan informasi metadata pada pushpin.
pin1.metadata = {
  title: 'Keterangan',
  description: 'Ibukota Abdya'
};
// Menambah penanganan event click pada pushpin
Microsoft.Maps.Events.addHandler(pin1, 'click', pushpinClicked);
//Memasang entitas pushpin pada peta
map.entities.push(pin1);

var pin2 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(4.727890, 95.601373),{color: 'red'});
pin2.metadata = {
  title: 'Keterangan',
  description: 'Ibukota Kab.Aceh Jaya'
 };
Microsoft.Maps.Events.addHandler(pin2, 'click', pushpinClicked);
map.entities.push(pin2);

//Untuk Kota Sabang
var pin3 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(5.909284, 95.304742),{color: 'yellow'});
pin3.metadata = {
  title: 'Keterangan',
  description: 'Ibukota Kotamadya Sabang'
 };
Microsoft.Maps.Events.addHandler(pin3, 'click', pushpinClicked);
map.entities.push(pin3);

//Untuk Kota Langsa
var pin4 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(4.476020, 97.952447),{color: 'blue'});
pin4.metadata = {
  title: 'Keterangan',
  description: 'Ibukota Kotamadya Langsa'
 };
Microsoft.Maps.Events.addHandler(pin4, 'click', pushpinClicked);
map.entities.push(pin4);
}

Perhatikan bagian snippet kode berikut :
var pin3 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(5.909284, 95.304742),{color: 'yellow'});

Terdapat kode {color: 'yellow'} yang menyatakan bahwa kita akan menggunakan warna pin kuning. Jika tidak terpadat kode {color: 'yellow'} berarti kita menggunakan warna default untuk pinnya, yaitu warna ungu.


5. Menampilkan infobox ketika pushpin diklik
function pushpinClicked(e) {
 //Memastika apakah infobox memiliki metadata untuk ditampilkan
 if (e.target.metadata) {
    //Menambah metadata pushpin pada option di infobox
  infobox.setOptions({
   location: e.target.getLocation(),
   title: e.target.metadata.title,
   description: e.target.metadata.description,
   visible: true
  });
 }
}

6.Memanggil fungsi GetMap() dan id myMap
<body onload="GetMap();">
.................
.................
.................
 <div id="myMap" style="width:700px; height:500px"></div>
.................
.................
.................
</body>

Silahkan diatur width dan height sesuai ukuran yang ingin ditampilkan.

Kode Lengkapnya

Dalam tutorial ini, kita menggunakan empat (4) kordinat untuk membuat pin yang dilengkapi dengan informasi metadatanya. Metadatanya menyatakan keterangan nama ibukota dari sebuah pin yang menunjukkan ke sebuah kordinat longitude dan latitude.
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <link rel="stylesheet" href="assets/css/bootstrap.css">
 <link rel="stylesheet" href="assets/css/ilmudetil.css">
    <script type='text/javascript' 
   src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap' 
   async defer>
 </script>
    <script type="text/javascript">
 var map = null, infobox, dataLayer;

 function GetMap() 
 {
  // Seting Map Options
  map = new Microsoft.Maps.Map(document.getElementById("myMap"),
     {
   credentials: "U4VD6Xi1NuVkAaN8KvJF~dereRmfzkm5VdVorK5lmlA~Ar4MuDpGzRmqdUtbXYvjm31t06tAU-400GnsVAY8Zna23hb05WjeiHiszdHOEAXU",
   center: new Microsoft.Maps.Location(4.660177, 97.012866), // Kordinat bener meriah
   mapTypeId: Microsoft.Maps.MapTypeId.aerial,
   zoom: 8
  });
 
  //Membuat jendela infobox berada di tengah pin (tidak ditampilkan)
  infobox = new Microsoft.Maps.Infobox(map.getCenter(), {
   visible: false
  });
  //Assign infobox pada variabel map
  infobox.setMap(map);
 
  AddData();
 }

// Fungsi create pin, metadata dan event click
function AddData() {
    //Create Pin
 var pin1 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(3.818570, 96.831841));
    //Menyimpan informasi metadata pada pushpin.
 pin1.metadata = {
   title: 'Keterangan',
   description: 'Ibukota Abdya'
 };
    // Menambah penanganan event click pada pushpin
 Microsoft.Maps.Events.addHandler(pin1, 'click', pushpinClicked);
 //Memasang entitas pushpin pada peta
 map.entities.push(pin1);

    var pin2 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(4.727890, 95.601373),{color: 'red'});
    pin2.metadata = {
   title: 'Keterangan',
   description: 'Ibukota Kab.Aceh Jaya'
  };
    Microsoft.Maps.Events.addHandler(pin2, 'click', pushpinClicked);
 map.entities.push(pin2);
 
 //Untuk Kota Sabang
 var pin3 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(5.909284, 95.304742),{color: 'yellow'});
    pin3.metadata = {
   title: 'Keterangan',
   description: 'Ibukota Kotamadya Sabang'
  };
    Microsoft.Maps.Events.addHandler(pin3, 'click', pushpinClicked);
 map.entities.push(pin3);
 
 //Untuk Kota Langsa
 var pin4 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(4.476020, 97.952447),{color: 'blue'});
    pin4.metadata = {
   title: 'Keterangan',
   description: 'Ibukota Kotamadya Langsa'
  };
    Microsoft.Maps.Events.addHandler(pin4, 'click', pushpinClicked);
 map.entities.push(pin4);
}

 function pushpinClicked(e) {
        //Memastika apakah infobox memiliki metadata untuk ditampilkan
        if (e.target.metadata) {
           //Menambah metadata pushpin pada option di infobox
            infobox.setOptions({
                location: e.target.getLocation(),
                title: e.target.metadata.title,
                description: e.target.metadata.description,
                visible: true
            });
        }
    }
</script>
 
</head>
<body onload="GetMap();">
<nav class="navbar navbar-default navbar-fixed-top">
 <div class="container">
  <div class="navbar-header">
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
   </button>
   <a class="navbar-brand" href="index.html">
   Pusat Ilmu Secara Detil</a>
  </div>
  <div class="navbar-collapse collapse">
   <ul class="nav navbar-nav navbar-left">
    <li class="clr1 active"><a href="index.html">Home</a></li>
    <li class="clr2"><a href="">Programming</a></li>
    <li class="clr3"><a href="">English</a></li>
   </ul>
  </div>
 </div>
</nav>
</br></br></br></br>
<!--- Bagian Judul--> 
<div class="container" style="margin-top:10px"> 
 <div class="row">
  <div class="col-md-8">
   <div class="panel panel-default">
    <div class="panel-heading">Pin Bing Maps</div>
     <div class="panel-body">
      <div id="myMap" style="width:700px; height:700px"></div>
     </div>
   </div>
  </div> 
 </div>
</div> 
</body>
</html>


Live Preview Download

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar