Multiple Custom Markers with Bing Maps API

Question

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!

<script>
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 <a href="http://www.google.com">Kipper</a> Market', 'description': 'Kipper Gostivar' };
	pushpinInfos[3] = { 'lat': 41.80584, 'lng': 21.15498, 'title': 'Salmon Market', 'description': '<a href="http://www.google.com">Kipper</a> 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 = "<api_key>";
    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 < 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 });
}
    </script>

<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0" type="text/javascript" charset="UTF-8"></script>

<body onLoad="GetMap();">
    <div id="map" style="position: relative; width: 600px; height: 450px;"></div>
</body>

have you tries the below answer? Please make update. Accept the answer if its working otherwise comment the issue you are getting again. Because this will help others who facing same problem. — Saji

Saji Saji · Accepted Answer · 2016-09-17T05:48:00

You can specify icon path and other properties of push pin icon like below

var pin = new Microsoft.Maps.Pushpin(locs[i], {icon: 'https://i-msdn.sec.s-msft.com/dynimg/IC488534.jpeg', width:'20px', height: '20px'});

Check out the reference documentation for more options.

http://msdn.microsoft.com/en-us/library/gg427629.aspx

For random Icon for each location you can configure the icon path in your location variable var pushpinInfos = [];. See the sample code below

Icons I used in the below code is example only. You can create your own Icons and can place in your server and set path of it.

<script>
    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', 'icon' :'https://i-msdn.sec.s-msft.com/dynimg/IC488534.jpeg' };
        pushpinInfos[1] = { 'lat': 41.799645, 'lng': 20.913514, 'title': 'Kipper Market', 'description': 'Kipper Gostivar', 'icon' :'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/24/Map-Marker-Marker-Outside-Azure-icon.png' };
        pushpinInfos[2] = { 'lat': 41.82328, 'lng': 20.962231, 'title': 'Another <a href="http://www.google.com">Kipper</a> Market', 'description': 'Kipper Gostivar', 'icon' :'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/24/Map-Marker-Marker-Outside-Chartreuse-icon.png' };
        pushpinInfos[3] = { 'lat': 41.80584, 'lng': 21.15498, 'title': 'Salmon Market', 'description': '<a href="http://www.google.com">Kipper</a> Gostivar', 'icon' :'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/24/Map-Marker-Marker-Inside-Chartreuse-icon.png' };
        pushpinInfos[4] = { 'lat': 42.000900, 'lng': 21.466440, 'title': 'Market', 'description': 'Gostivar', 'icon' :'https://i-msdn.sec.s-msft.com/dynimg/IC488534.jpeg' };
        var infoboxLayer = new Microsoft.Maps.EntityCollection();
        var pinLayer = new Microsoft.Maps.EntityCollection();
        var apiKey = "<api_key>";
        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 < pushpinInfos.length; i++) {
            locs[i] = new Microsoft.Maps.Location(pushpinInfos[i].lat, pushpinInfos[i].lng);
            var pin = new Microsoft.Maps.Pushpin(locs[i], {icon: pushpinInfos[i].icon, width:'20px', height:'20px'});
            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 });
    }
</script>

Multiple Custom Markers with Bing Maps API

1 Answers