Menambah Pin pada Bing Maps

Biasanya tutorial pembuatan marker pada sebuah peta (map) menggunakan Google Maps. Dalam kesempatan ini kita memberikan alternatif selain google maps, yaitu menggunakan layanan dari Bing Maps yang merupakan besutan dari Microsfot.

Tutorial ini akan membahas cara penambahan Pin pada sebuah lokasi peta. Istilah Pin ini sama halnya dengan marker yang sering diistilah dalam Google Maps.

Agar kita dapat menggunakan layanan bing maps, terlebih dahulu kita harus mendapat sebuah key. Key ini  kita gunakan untuk memanggil sejumlah layanan yang disediakan oleh bing maps. Untuk mendapat key ini sendiri bersifat free. Berikut ini langkah-langkah untuk mebuat atau mendapat key dari Bing Maps :

Cara Mendapatkan Key dari Bing Maps

1. Silah buka alamat Bing Maps Dev Center  : https://www.bingmapsportal.com/.
• Dalam menggunakan layanan Bing Maps Dev Center, kita harus menggunakan akun microsoft. Seandainya belum memiliki, dapat kita create pada link  create account microsoft.


2. Setelah anda sign-in dengan menggunakan microsoft account pada bingmapsportal.com, sehingga akan muncul informasi berupa pertanyaan sebagai berikut :
   Do you want to use the account xxxx@outlook.com for your new Bing Maps account? Yes
   Jika ya, maka klik "Yes" kemudian dilanjutkkan dengan pengisian data-data lainna yang harus diisi seperti :Account Name dan Email Address.


3. Pilih Key dibawah My Account seperti gambar dibawah ini :
   
4. Minimal mengisi data pada bagian yang wajib diisi dalam mengcreate sebuah key:
• Application name: Required, menyatakan nama aplikasi
• Key type: Required. Pilih jenis  yang akan anda create.
• Application type: Required. Silahkan pilih peruntukan jenis aplikasi tersebut.

Jika anda berhasil mendapatkan Key dari Bing Maps, berarti kita sudah dapat menggunakan sejumlah layanan dari Bing Maps.

Berikut ini adalah output ataupun hasil akhir dari tutorial yang akan kita kerjakan, seperti ditunjukkan oleh Gambar dibawah ini :

Langkah-langkah membuat Pin pada Bing Maps

1. Script untuk memanggil API Bing Maps
Kode dibawah ini berfungsi memanggil API dari Bing Maps. Disini kita menggunakan 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
Dalam mengseting map options, sekurang-kurangnya kita harus mendefinisikan key yang telah kita dapatkan yang kemudian kita inputkan pada kode <credentials>

// Seting Map Options
map = new Microsoft.Maps.Map('#myMap', {
 credentials:"U4VD6Xi1NuVkAaN8KvJF~dereRmfzkm5VdVorK5lmlA~Ar4MuDpGzRmqdUtbXYvjm31t06tAU-400GnsVAY8Zna23hb05WjeiHiszdHOEAXU",
 center: new Microsoft.Maps.Location(5.550176, 95.319263),
 mapTypeId: Microsoft.Maps.MapTypeId.aerial,
 zoom: 10
}); 

Kode center menyatakan lokasi kordinat titik tengah dari peta yang akan diload. Kode mapTypeId menyatakan jenis peta dan zoom menyatakan level zoom yang diset. Pengaturan map options ini dilakukan dalam fungsi GetMaps

3. Mengatur jendela infobox berada di tengah pin
Langkah ini bertujuan untuk mengatur jendela atau window dialog berada pada posisi tengah dari pin yang akan diklik.

//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. Membuat Pin
Tujuan dari langkah ke-4 ini adalah membuat pin. Pin ini kita tambahakan ke variabel center, dimana variabel ini berisikan kordinat latitude dan longtitude.

var center = map.getCenter(); 
var pin = new Microsoft.Maps.Pushpin(center);

5. Membuat Informasi metadata pada pin
Langkah ini menambah keterangan atau informasi pada pin. Jika sebuah pin diklik maka akan dibangkitkan informasi metada tersebut.

//Menyimpan informasi metadata pada pushpin.
pin.metadata = {
 title: 'Keterangan',
 description: 'Ibukota Provinsi Aceh'
};

6.Membuat fungsi event click dan set entitas pushpin pada peta

// Menambah penanganan event click pada pushpin
Microsoft.Maps.Events.addHandler(pin, 'click', pushpinClicked);

//Memasang entitas pushpin pada peta
map.entities.push(pin);

7. Membuat fungsi yang menampilkan infobox ketika pushpin diklik

function pushpinClicked(e) {        
 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
  });
 }
}

8. Memanggil fungsi GetMap() dan id myMap
Langkah ke-2 s/d ke-7 dibuat dalam fungsi GetMap(). Dalam   tag <body> kita akan memanggil fungsi GetMap dan juga memanggil id myMap seperti contoh dibawah ini :

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

Kode Lengkap Pembuatan Pin Bing Maps

Dalam tutorial ini kita membuat pin pada titik kordinat latitude dan longtitude :(5.550176, 95.319263) yang mana kordinat tersebut menyatakan kordinat untuk kota Banda Aceh. Dalam contoh ini kita mengimplementasikan bing maps pada Bootstrap.

<!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, infobox;
    function GetMap() {
        // Seting Map Options
  map = new Microsoft.Maps.Map('#myMap', {
            credentials:"U4VD6Xi1NuVkAaN8KvJF~dereRmfzkm5VdVorK5lmlA~Ar4MuDpGzRmqdUtbXYvjm31t06tAU-400GnsVAY8Zna23hb05WjeiHiszdHOEAXU",
   center: new Microsoft.Maps.Location(5.550176, 95.319263),
            mapTypeId: Microsoft.Maps.MapTypeId.aerial,
            zoom: 10
        }); 

        //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);
        
  //Create sebuah pin/marker pada kordinat banda aceh
  var center = map.getCenter(); 
        var pin = new Microsoft.Maps.Pushpin(center);

        //Menyimpan informasi metadata pada pushpin.
        pin.metadata = {
            title: 'Keterangan',
            description: 'Ibukota Provinsi Aceh'
        };

        // Menambah penanganan event click pada pushpin
        Microsoft.Maps.Events.addHandler(pin, 'click', pushpinClicked);

        //Memasang entitas pushpin pada peta
        map.entities.push(pin);
    }

    // Fungsi yang menampilkan infobox ketika pushpin diklik
 function pushpinClicked(e) {        
        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:500px"></div>
     </div>
   </div>
  </div> 
 </div>
</div> 
</body>
</html>

Live Preview Download