Bing Maps jQuery UI Widget

Recently I was working on a project that required the usage of a maps service.  I needed a map that could add pins dynamically (one to many) and have the ability to do routing between two of the pins.  So the obvious choices were Google Maps and Bing Maps.  I opted to use Bing Maps because of the routing abilities for the specific area I needed it to route (a college campus).  Google maps has walking routing but for some reason it didn’t support walking paths on the campus.

My requirements were that it would be easily reusable, easy to setup on the page with one to many pins and that I could turn on and off features with a quick parameter change.  If you would like to see a demo please go here.  This plugin essentially wraps around a small portion of the Bing Maps API, but it’s the portion that was required for my needs.


The Html is simple div container to house the map and another div container to house the coordinates.  The coordinates are stored inside a dl.  It’s not exactly compliant with standards have invalid attributes, however it’s on the list to use the data attribute that is compatible with jQuery 1.4.3.  But for now this works.  The information for the pins (names/descriptions) are stored in dt and dd tags.

<div id="map" style="margin: 0px 0px 20px">
               <div class="" lat="38.53701730537018" lng="-121.7490667104721">
                    <dt >Mrak Hall</dt>
                    <dd>Home of AG Dean's Office</dd>
               <div class="" lat="38.539411128558385" lng="-121.74984186887741">
                    <dt >Shields Library</dt>
                    <dd>The Main Library of Davis</dd>
     </div> <!-- End of coordinate container -->
</div> <!-- End of map container –>


The script couldn’t be more simple.  Below is a basic call to initialize a map in a map container with an id of “map” and seta height of 400px.

     $("#map").bingmaps({height: "400px"});


There are several parameters that can be passed into the plugin:

Parameter Description
height height of the map box
width width of the map box
defaultLat default latitude location on load (float)
defaultLng default longitude location on load (float)
defaultZoom default zoom level (int)
defaultMapStyle default map style (VEMapStyle)
enableRouting Put into routing mode (boolean)
routeMode routing mode (walking, driving) (VERouteMode)
autoRoute whether or not to auto route between two points (boolean)
displayCurrentLocation draw crosshair on center and display current lat/lng coordinates (boolean)
displayLatitudeControl control to enter specific latitutde control (reference)
displayLongitudeControl control to enter specific longitude control (reference)
crosshairLocation path to the crosshair image
displayZoom display the current zoom level (boolean)
displayZoomControl control to enter specific zoom level (reference)
displaySearch display a box to search with (boolean)
locationTitle n/a
searchTitle n/a
coordinateTitle n/a
loadAllPins initially load all pins (boolean)
hideCoordinates hides coordinates (boolean)
usePushPins use push pins or a custom shape (boolean)
customShape html for custom shape, used only if usePushPins is false
allowShapeDragging allows shapes to be dragged (boolean)


You can download the plugin here.



One thought on “Bing Maps jQuery UI Widget

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s