Support MapMarker.io!
Buy Me A Coffee

Documentation

Bing Maps Integration

Here is a quick code sample that demonstrates how to use our map markers with Bing Maps.

Important for animated map markers: Bing Maps renders all shapes on an HTML 5 canvas which ends up flattening images and disables any animation they might have built in. In this case its likely only rendering the first frame of your animated image which may be the reason why it can't be seen. The solution is to use an "HTML Pushpin": Read more. 

var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
    credentials: 'Your Bing Maps Key'
});

var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), {
    icon: 'https://mapmarker.io/api/v3/font-awesome/v6/pin?icon=fa-solid+fa-star&size=50&hoffset=0&voffset=-1',
    // define an anchor point at the bottom middle of pin markers to avoid visual shift during zooms
    // for non-pin style markers, you probably won't need this
    anchor: new Microsoft.Maps.Point(25, 50)
});

map.entities.push(pushpin);

Bing Maps Animated Icons via HTML Pushpin

Here is a quick code sample that demonstrates how to use our animated map markers with Bing Maps:

  1. Initialize Bing Map
  2. Initialize Bing Map HtmlPushpinLayerModule Module
  3. Async Load MapMarker.io Icon
  4. Add Icon to HtmlPushpinLayer
  5. Add HtmlPushpinLayer to Bing Map
var map = new Microsoft.Maps.Map(document.getElementById('map-bing-html-pushpin'), {
    credentials: 'Your Bing Maps Key',
    disableScrollWheelZoom: true
});

// initalize map
var loc = new Microsoft.Maps.Location(-25.34492034440821, 131.0329830613222);
map.setView({ center: loc, zoom: 12 });

// fetch html pushpin layer module (source: https://samples.bingmapsportal.com/overlays/html-pushpin-layer)
Microsoft.Maps.registerModule('HtmlPushpinLayerModule', 'https://samples.bingmapsportal.com//overlays/html-pushpin-layer/HtmlPushpinLayerModule.js');
Microsoft.Maps.loadModule('HtmlPushpinLayerModule', function () {

    // fetch marker
    const Http = new XMLHttpRequest();
    const url='https://mapmarker.io/api/v3/font-awesome/v6/icon?size=50&icon=fa-solid%20fa-person-hiking&color=333&label=&labelAnimation=pulse&labelAnimationDuration=1s&lc=4CAF50';
    Http.open("GET", url);
    Http.send();

    //  marker loaded callbakc
    Http.onreadystatechange = function() {
        // marker available
        if(this.readyState == 4 && this.status == 200) {
            var pin = new HtmlPushpin(loc, Http.responseText, {anchor: new Microsoft.Maps.Point(25, 50)});
            layer = new HtmlPushpinLayer([pin]);
            map.layers.insert(layer);
        }
    }
});