How to Create Multiple Pushpin in Bing Maps

Our tutorial "Bing Maps" this time will discuss how to create multiple Pushpins on Bing Maps. Actually, in the previous tutorial, we have learned and gave examples of pin creation on bing maps (but only one pin ).

If you need tutorial about how to create pin or marker on google maps, please visit tutorial :"Create marker, Create multiple marker, Creating Google Map Markers from Database Query, Display Google Maps Multiple Markers Different Icons".

To use the services from Bing Maps, we must get a key that can be obtained for free by registration first. You want to know more how to get key, you can find in the tutorial: "Using Bing Maps service".

Here is the  ouput or the expected result in this tutorial, as shown by the image below:

Step by Step Guide: Create Pin on Bing Maps

1. Script for Loading Map from Bing Maps Server 
The purpose of the code below serves to call the service from the bing maps server. API that we use is 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
Setting map options aims to provide options for how a map will be displayed. In this case at least we define the key of Bing Maps and the id to which the map will be called.

This map option setting is done in the function GetMap(). In this tutorial we use the options "zoom", "map types" as well as "center coordinate options".

// 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
});

If we notice the code above :

• The code myMap specifies id that will be called with tag <div id = myMap>
• The code credentials specifies the key of Bing Maps.
• The code mapTypeId specifies the map types which will be displayed. For the types of maps please read the following explanation: MapTypeId Enumeration.
• The code center specifies the location of the midpoint cordinates when the map is loaded
• The code zoom specifies the level map which can be enlarged.

3. Set the window infobox  in the middle of 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 map in the last code.

//Create window 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 pin, pin metadata and event click
Here we will make many pins, because the pins are used more than one then we will use the help of a function that we define ourselves.

function AddData() {
//Create Pin
var pin1 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(3.818570, 96.831841));
//Store metadata on pushpin
pin1.metadata = {
  title: 'Keterangan',
  description: 'Ibukota Abdya'
};
// Add handling event click on pushpin
Microsoft.Maps.Events.addHandler(pin1, 'click', pushpinClicked);
//Set entity pushpin on map
map.entities.push(pin1);

// for Calang city
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);

//For Sabang city
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);

//For Langsa city
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);
}

Notice the following snippet code :

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

There's code {color: 'yellow'} which state that we will use a yellow pin. If there's not code {color: 'yellow'}, it means we use the default color for pin, which is purple.

5. Displays infobox when pushpin is clicked

function pushpinClicked(e) {
 //To ensure whether infobox have metadata to be displayed
 if (e.target.metadata) {
    //Add metadata pushpin on option infobox
  infobox.setOptions({
   location: e.target.getLocation(),
   title: e.target.metadata.title,
   description: e.target.metadata.description,
   visible: true
  });
 }
}

6. Call function GetMap () and id myMap

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

Please set the width and height according to the size you want displayed.

Full Source Code

In this tutorial, we use four (4) coordinates to create a pin that comes with metadata information. The metadata states the name of the capital city of a pin that points to a coordinate of longitude and 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
  });
 
  //Create window 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);
 
  AddData();
 }

function AddData() {
    //Create Pin
 var pin1 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(3.818570, 96.831841));
    //Store metadata on pushpin
 pin1.metadata = {
   title: 'Keterangan',
   description: 'Ibukota Abdya'
 };
  // Add handling event click on pushpin
 Microsoft.Maps.Events.addHandler(pin1, 'click', pushpinClicked);
//Set entity pushpin on map
 map.entities.push(pin1);
    
   // for Calang city
    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);
 
 //For Sabang city
 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);
 
 //For langsa city
 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) {
         //To ensure whether infobox have metadata to be displayed
        if (e.target.metadata) {
           //Add metadata pushpin on option 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