title: Multiple Custom Markers with Bing Maps API
body: <p>I've got the code to add multiple markers with infoboxes with Bing Maps API, currently using default pin markers. I know there's documentation on adding a custom marker but I'm looking to use a different custom image marker for each point. Managed to implement with Google Maps API but need to use Bing maps and stuck with this one. Any help appreciated, thanks!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script&gt;
  var pinInfobox;
  function GetMap() {
      var pushpinInfos = [];
      pushpinInfos[0] = { 'lat': 42.0076215, 'lng': 20.9689308, 'title': 'Kipper Market', 'description': 'Braka Miladinovi 178, 1200 Tetovë, Tetovo, Macedonia' };
      pushpinInfos[1] = { 'lat': 41.799645, 'lng': 20.913514, 'title': 'Kipper Market', 'description': 'Kipper Gostivar' };
   pushpinInfos[2] = { 'lat': 41.82328, 'lng': 20.962231, 'title': 'Another &lt;a href="http://www.google.com"&gt;Kipper&lt;/a&gt; Market', 'description': 'Kipper Gostivar' };
   pushpinInfos[3] = { 'lat': 41.80584, 'lng': 21.15498, 'title': 'Salmon Market', 'description': '&lt;a href="http://www.google.com"&gt;Kipper&lt;/a&gt; Gostivar' };
   pushpinInfos[4] = { 'lat': 42.000900, 'lng': 21.466440, 'title': 'Market', 'description': 'Gostivar' };
      var infoboxLayer = new Microsoft.Maps.EntityCollection();
      var pinLayer = new Microsoft.Maps.EntityCollection();
      var apiKey = "&lt;api_key&gt;";
      var map = new Microsoft.Maps.Map(document.getElementById("map"), { credentials: apiKey });
      // Create the info box for the pushpin
      pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false });
      infoboxLayer.push(pinInfobox);
      var locs = [];
      for (var i = 0 ; i &lt; pushpinInfos.length; i++) {
          locs[i] = new Microsoft.Maps.Location(pushpinInfos[i].lat, pushpinInfos[i].lng);
          var pin = new Microsoft.Maps.Pushpin(locs[i]);
          pin.Title = pushpinInfos[i].title;
          pin.Description = pushpinInfos[i].description;
          pinLayer.push(pin); 
          Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
      }
      map.entities.push(pinLayer);
      map.entities.push(infoboxLayer);
      var bestview = Microsoft.Maps.LocationRect.fromLocations(locs);
      map.setView({ center: bestview.center, zoom: 10 });
  }
  function displayInfobox(e) {
      pinInfobox.setOptions({ title: e.target.Title, description: e.target.Description, visible: true, offset: new Microsoft.Maps.Point(0, 25) });
      pinInfobox.setLocation(e.target.getLocation());
  }
  function hideInfobox(e) {
      pinInfobox.setOptions({ visible: false });
  }
      &lt;/script&gt;
  
  &lt;script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0" type="text/javascript" charset="UTF-8"&gt;&lt;/script&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body onLoad="GetMap();"&gt;
      &lt;div id="map" style="position: relative; width: 600px; height: 450px;"&gt;&lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>