Chris Pietschmann

husband, father, hacker, entrepreneur, futurist, innovator, autodidact


Bing Maps Ajax 7: Add a Simple Mini Map

The Bing Maps Ajax v7 control doesn’t include support for adding a Mini Map. So, I decided to quickly work up a simple example of adding one. Below is the source code for it and a zip download of the code at the bottom of the post.


Source Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="" type="text/javascript" charset="UTF-8"></script>
    <script src=""></script>
            border: solid 1px #777;
            width: 150px;
            height: 150px;
<div id="myMap" style="position: relative; width: 530px; height: 300px;"></div>
<script type="text/javascript">
    var bingMapsKey = "Your Bing Maps Key";

    // Load the Main Map
    var map = new Microsoft.Maps.Map(
            credentials: bingMapsKey,
            mapTypeId: Microsoft.Maps.MapTypeId.road,
            center: new Microsoft.Maps.Location(43, -87.9),
            zoom: 9
    var mapElem = $(map.getRootElement());
    // Create DIV and add to Main Map
    var miniMapDiv = $('<div>').
    // Position to the Top Right corner
        position: 'absolute',
        top: 0,
        left: (mapElem.width() - miniMapDiv.width() - 2)
    // Initialize Mini Map
    var miniMap = new Microsoft.Maps.Map(miniMapDiv[0], {
        credentials: bingMapsKey,
        showCopyright: false, showDashboard: false, showLogo: false, showScalebar: false
    // Attach Event Handler to Sync Mini Map with Main Map
    var syncMiniMap = function () {
            center: map.getCenter(),
            zoom: map.getZoom() - 4
        window.status = map.getCenter();
    Microsoft.Maps.Events.addHandler(map, "viewchange", syncMiniMap);
    // Sync Mini Map

Download: (1 KB)

blog comments powered by Disqus