Pushpin Hover Style

  • Article

Creating a custom pushpin is great, but having the style change when users interact with the pushpin can make the user experience a bit more engaging. This example uses mouse events to update the pushpin options when a user mouses over, press down and mouses out of the pushpin. For simplicity the color of the pushpin will be change depending on how the user interacts with the pushpin, however you could just as easy change any of the other pushpin options if desired.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
	<script type='text/javascript'>
    var map;

    var defaultColor = 'blue';
    var hoverColor = 'red';
    var mouseDownColor = 'purple';

    function GetMap()
    {
        map = new Microsoft.Maps.Map('#myMap', {});

        var pin = new Microsoft.Maps.Pushpin(map.getCenter(), {
            color: defaultColor
        });

        map.entities.push(pin);

        Microsoft.Maps.Events.addHandler(pin, 'mouseover', function (e) {
            e.target.setOptions({ color: hoverColor });
        });

        Microsoft.Maps.Events.addHandler(pin, 'mousedown', function (e) {
            e.target.setOptions({ color: mouseDownColor });
        });

        Microsoft.Maps.Events.addHandler(pin, 'mouseout', function (e) {
            e.target.setOptions({ color: defaultColor });
        });
    }
    </script>
    <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=[YOUR_BING_MAPS_KEY]' async defer></script>
</head>
<body>
    <div id="myMap" style="position:relative;width:800px;height:600px;"></div>
</body>
</html>

If you run this code, you will see a blue pushpin in the center of the map. If you drag the mouse over the pushpin it will change to red and if you press down purple.

Note

This is unrelated to Pushpin enableHoverStyle option which only effects the default pushpin style. However you could use the pushpin's getOptions function inside the event handlers to determine if the pushpins style should be changed or not when hovered.