Creating Custom Modules

The Bing Maps Modular framework allows you to create reusable blocks of code that tie into Bing Maps. This saves on development time and is a great way to improve code quality by re-using proven and tested modules.

The basic overview of how to create a module:

  1. Create a single JavaScript file that contains all the code for your module.
  2. Add a call to the Bing Maps moduleLoaded event to the end of the JavaScript file containing the code for your module, passing in the name of your module. For example:


  1. Register your module by adding a reference to where your modular plugin JavaScript file is located. This is often done right after the map is loaded. For example:

Microsoft.Maps.registerModule('MyModule', '');

  1. Load your module by calling the loadModule method in Bing Maps and passing in a callback method that will be fired when the module has been loaded. For example:

Microsoft.Maps.loadModule('MyModule', myModuleLoaded);


The following example shows a common way of structuring a custom module.

var MyModule = function (map) {
    var localVariable = "";

    function init() {


    //Private Method
    function _doSomething() {

    //Public method
    this.DoSomething = function () {


//Call the Module Loaded method.

If this module was stored saved in a folder called js and a file called MyModule.js, the following code can register and load it.

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

        function GetMap() {
            map = new Microsoft.Maps.Map('#myMap', {
                credentials: ‘Your Bing Maps Key’
            //Register code to our Custom Module
            Microsoft.Maps.registerModule('MyModule', 'js/MyModule.js');

            //Load the arrow module
            Microsoft.Maps.loadModule('MyModule', function(){
                //MyModule is loaded. Do post load tasks here.
    <script type='text/javascript' src='' async defer></script>
    <div id="myMap" style="position:relative;width:600px;height:400px;"></div>

Tip: The Bing Maps V7 SDK also supported custom modules. Several developers created useful modules and made them available through the Bing Maps V7 Module project on CodePlex. This is a great place to see how other custom modules have been created.