--> Skip to main content
Home Bing Maps Bootstrap Map Pemrograman Web Cara Menambah Pin pada Bing Maps

Cara Menambah Pin pada Bing Maps

Tutorial tentang penambahan marker pada sebuah lokasi di peta pada umumnya menggunakan layanan Google Maps. Jika kita mencari tutorial di internet sangat sedikit yang membahas tentang Bing Maps. Dalam tutorial ini kita akan membahas beberapa hal dalam penggunaan Bing Maps, seperti : bagaimana memanggil peta dari Bing Maps dari website kita dan menambahkan Pin pada Bing Maps.

Di Bing Maps kita mengenal istilah Pin yang dalam istilah Google Maps sering disebut dengan Marker. Sebelum kita menambah Pin pada sebuah lokasi yang terdiri dari kordinat latitude dan longtitude, terlebih dahulu kita harus regsitrasi untuk mendapat key dari Bing Maps. Key ini berfungsi agar kita apat memanggil layanan dari Bing Maps.

Berikut ini adalah output atau hasil akhir yang akan kita kerjakan dalam tutorial kali ini, seperti ditunjukkan oleh Gambar dibawah ini :
Create pushpin pada Bing Maps

Cara Mendapatkan Key dari Bing Maps

  1. Silahkan ketikkan url Bing Maps Dev Center  : https://www.bingmapsportal.com/.
    • Untuk masuk ke Bing Maps Dev Center, pastikan menggunakan account microsoft. Jika anda belum memiliki akun, silahkan create account microsoft.
  2. Setelah anda sign-in dengan menggunakan microsoft account pada bingmapsportal.com, maka akan muncul pertanyaan berikut :
      Do you want to use the account xxxx@outlook.com for your new Bing Maps account? Yes
    Jika ya, maka klik "Yes" lalu lanjutkkan pengisian data yang diminta seperti :Account Name dan Email Address.
  3. Pilih Key dibawah My Account seperti gambar dibawah ini :
    Create Key Bing Maps

  4. Berikan informasi yang dibutuhkan dalam mengcreate sebuah key:
    • Application name: Required, menyatakan nama aplikasi
    • Application URL: menyatakan alamat url apalikasi bing maps yang akan kita buat.
    • Key type: Required. Pilih jenis  yang akan anda create.
    • Application type: Required. Silahkan pilih peruntukan jenis aplikasi tersebut.
Setelah anda mendapat Key dari Bing Maps, ikuti langkah-langkah pembuatan  pin pada Bing Maps dibawah ini.

Langkah-langkah membuat Pin pada Bing Maps

1. Script untuk Loading Map dari Bing Maps Server
Kode dibawah ini berfungsi memanggil server bing maps, disni 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
Pada pengaturan map options, sekurang-kurang kita mendefinisikan key dari Bing Maps dan id yang nantinya peta tersebut akan dipanggil. Pengaturan map option ini dilakukan dalam fungsi GetMap(). Dalam contoh ini kita juga mengatur tipe peta dan level zoom serta kordinat yang akan dibuat pinnya (dalam google maps disebut marker).
// 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 credentials menyatakan key dari bing maps, mapTypeId menyatakan tipe peta dan center menyatakan lokasi kordinat titik tengah ketika peta diload. Sedangkan #myMap menyatakan id dari map yang nantinya akan dipanggil dalam tag <body>..</body>, dimana nantinya kita menggunakan tag <div id=myMap>

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 atau marker
Langkah ke-4 ini membuat pin pada kordinat yang telah kita tentukan pada properti center di variabel map (langkah 2 diatas).
var center = map.getCenter(); 
var pin = new Microsoft.Maps.Pushpin(center);

5. Menambah Informasi metadata pada pin yang telah dicreate
//Menyimpan informasi metadata pada pushpin.
pin.metadata = {
 title: 'Keterangan',
 description: 'Ibukota Provinsi Aceh'
};

6. Create penanganan 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 sampai dengan langkah ke-7 dibuat dalam fungsi GetMap(). Oleh karena itu fungsi tersebut perlu kita panggil dalam tag <body> beserta pemanggilan id myMap seperti contoh dibawah ini :
<body onload="GetMap();">
.................
.................
.................
 <div id="myMap" style="width:700px; height:500px"></div>
.................
.................
.................
</body>


Kode Lengkapnya

Dalam contoh ini kita akan membuat pin atau marker pada kota Banda Aceh yang memiliki kordibat latitude dan longtitude :(5.550176, 95.319263). 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

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