Bing Maps 8 Page with Control Area

I’ve been looking at a pre-release version of Bing Maps 8. Version 8 will have new interactive features such as the ability to draw shapes on the map. This means that a Bing 8 map can more easily be the focus of an application, rather than being a semi-static map that supports Web page content (like a map that is associated with a restaurant).

So, I figured I’d code up an example HTML page that has a Bing map and a control area for user input and output. I’m no UI guy for sure. I just wanted something as simple as possible.


After some experimentation, I created an HTML page with a control area on the left and an area for the map on the right. Both are HTML div tags that float:left followed by a magic “br style=”clear: left;” tag to make the two areas side-by-side.

The controlPanel div contains a button input (to indicate typical user controls) and a textarea named “msgArea” for messages. Messages are programmatically displayed with:

function UpdateMsgArea(txt)
  var existing = msgArea.value + "\n" + "\n";
  msgArea.value = existing + txt;

The UpdateMsgArea function uses the value property plus two “\n” characters for double-spacing. I originally tried to use innerHTML plus two br tags, but a textarea doesn’t work that way.

Good fun. Looking forward to the release of Bing Maps 8.


This entry was posted in Miscellaneous. Bookmark the permalink.