Custom Overlay on Bing Maps - Working

by darcon77

HTML

<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id='myMap' style="position:relative;width:800px;height:600px;"></div>

CSS

.white{font-family:Arial;font-size:12px;color:black;}
.d1{float:left; height:12px;width:12px; padding:6px; display:block;}
.d3{float:left; height:24px;width:12px; display:block;}
.d2{float:left; height:16px;white-space:nowrap; padding:4px;}
.d2{background:url(http://www.silentpassenger.com/Images/status/label-back-dir-w-m.png) repeat-x;}
.d3{background:url(http://www.silentpassenger.com/Images/status/label-back-dir-w-r.png) no-repeat;}

JavaScript

var ImageOverlay = function (map, location) {
    var _basePushpin = new Microsoft.Maps.Pushpin(location);
    var _id = "imgPin";
    var content="<div class='ui-helper-clearfix white'><div class='d1' style='background:url(http://www.silentpassenger.com/Images/status/label-back-dir-stop.png) no-repeat;'><img src='http://www.silentpassenger.com/Images/status/stopless5.gif'/></div><div class='d2'>Test Icon</div><div class='d3'></div></div>";

    var pushpinOptions = {
        width: 120,
        height: 24,
        anchor: new Microsoft.Maps.Point(12, 12),
        htmlContent: content
    };
    
    _basePushpin.setOptions(pushpinOptions);

    return _basePushpin;
};

var map;
// Initialize the map
map = new Microsoft.Maps.Map(document.getElementById("myMap"), {
    credentials: "Aim8TwOPfTMsptlUljU5kqNv9q1NupUZcKmK4WJjaBlJZraD-JXj0oYZxbpozVTI",
    center: new Microsoft.Maps.Location(40.76187, -73.32468),
    zoom: 16
});

var imgPin = ImageOverlay(map, new Microsoft.Maps.Location(40.76187, -73.32468));
map.entities.push(imgPin);

Microsoft.Maps.Events.addHandler(imgPin, 'mouseover', function(e){alert(e.target);});