How to Add Pushpin Bing Maps to Our Site

Tutorial about how to add marker on a map generally using google maps service. If we seek tutorial about Bing Maps, it is not as many as google maps. In this tutorial, we'll learn many things such as : how to attach bing maps to our site and also how to add pin (marker) of bing maps.

In Bing Maps, we know term Pin while in Google Maps is often called marker. Before we add Pin to a location consisting of latitude and longtitude cordinates, we must first register to get key from Bing Maps. With this keyword, we can call servive from Bing Maps.

Here is the output or final result that we will do in this tutorial, as shown by Figure below:

How to Obtain the Key from Bing Maps

1. Type url Bing Maps Dev Center  : https://www.bingmapsportal.com/.
• To login in Bing Maps Dev Center, make sure you use account  from microsoft. If you haven't one, please create account microsoft.
2. After you sign in by using that account on bingmapsportal.com, then it will show the question like this:
   
   Do you want to use the account xxxx@outlook.com for your new Bing Maps account? Yes
   If yes, click "Yes" then  continue by fill out the requsted data like :Account Name and Email Address.
   
3. Choose Key below My Account like figure below :
   
4. Give the required information in creating a key :
• Application name: Required, it's application name
• Application URL: inform url address of  bing maps application that will we create. This is an optional field which is usefull in helping you remember the purpose of that key in the future.
• Key type: Required.  Select the key type that you want to create.
• Application type: Required.  Select the application type that best represents the application that will use this key.

Once you get the Key from Bing Maps, follow the steps in creating pin on Bing Maps below.

Step by Step Guide: Create Pin on Bing Maps

1. Script for Loading Map from Bing Maps Server
The code below serves to call the server bing maps, here we use the API bing maps version 8:

<script type='text/javascript' 
 src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap' 
 async defer>
</script>

2. Set map options
In map options settings, at least we define the key from Bing Maps and the id that the map will be called on. This map option setting is done in the GetMap () function. In this example we also set the map type and zoom level and the coordinates that the pin will create (in google maps is called 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
}); 

The code credentials declares the key of bing maps, mapTypeId specifies the map type and center declares the location of the midpoint coordinates when the map is loaded. While #myMap declares the id of the folder that will be called in the tag </ body>, where later we use the tag

3. Set the infobox window in the middle of the pin
The purpose of this step is to set the window or dialog window in the middle position of the pin that will be clicked. If the information we make a lot, then the window will adjust it where the window remains in the middle position against the pin. Then proceed by setting the infobox on the folder in the last code.

//Create windom infobox in the middle of pin (not displayed)
infobox = new Microsoft.Maps.Infobox(map.getCenter(), {
 visible: false
});
//Assign infobox on variabel map
infobox.setMap(map);

4. Create a pin or marker
This 4th step creates a pin on the coordinates we have set in the center property in the map variable (step 2 above).

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

5. Adding metadata information on the pins that have been created

//Store metadata on pushpin.
pin.metadata = {
 title: 'Keterangan',
 description: 'Ibukota Provinsi Aceh'
};

6. Create handling click event and set pushpin entity on the map

// Add Handling event click on pushpin
Microsoft.Maps.Events.addHandler(pin, 'click', pushpinClicked);

//Set entity of pushpin on map
map.entities.push(pin);

7. Create a function that displays infobox when pushpin is clicked

function pushpinClicked(e) {        
 if (e.target.metadata) {
  //Add metadata pushpin on option in the infobox
  infobox.setOptions({
   location: e.target.getLocation(),
   title: e.target.metadata.title,
   description: e.target.metadata.description,
   visible: true
  });
 }
}

8. Call the function GetMap () and id myMap
Step 2 to step 7 is created in the GetMap () function. Therefore the function we need to call in the tag along with call id myMap like the example below:

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

Full Source Code

In this example we will create a pin or marker to Banda Aceh city which has latitude and longitude : (5.550176, 95.319263). In this example we are implementing bing maps on 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
        }); 

        //Create windom infobox in the middle of pin (not displayed)
        infobox = new Microsoft.Maps.Infobox(map.getCenter(), {
            visible: false
        });
        //Assign infobox on variabel map
        infobox.setMap(map);
        
  //Create a pin/marker on Banda Aceh coordinates
  var center = map.getCenter(); 
        var pin = new Microsoft.Maps.Pushpin(center);

        //Store metadata on pushpin.
        pin.metadata = {
            title: 'Keterangan',
            description: 'Ibukota Provinsi Aceh'
        };

        // Add Handling event click on pushpin
        Microsoft.Maps.Events.addHandler(pin, 'click', pushpinClicked);

        //Set entity of pushpin on map
        map.entities.push(pin);
    }

    // Function that displayed infobox when pushpin clicked
 function pushpinClicked(e) {        
        if (e.target.metadata) {
            //Add metadata pushpin on option in the 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