Focus On Patient Outcomes.

Making Web Apps Sizzle with Bing Maps and HTML5’s Geolocation API

Contact Us Today

A few weeks ago, I wrote about Silverlight for Windows Phone’s location API, which allows applications to ascertain their location – latitude, longitude, altitude (if GPS is available), and so on. More recently, I’ve been writing samples around HTML5’s geolocation API. The two APIs are remarkably similar save for HTML5’s lack of support for setting movement thresholds. Both allow you to write location-aware apps with remarkably little code, and both can be combined with Bing Maps to produce stunning UIs pinpointing a user’s location, providing turn-by-turn directions, and more. In fact, once you learn one of the location APIs, you’ll feel right at home with the other. They’re that much alike.

To demonstrate how to combine HTML5 geolocation with Bing Maps, I wrote a sample that I call MapLocation.html. Here it is in IE9, with a pushpin directly over my house:


Here’s the source code for the page, minus the Bing Maps API key that you must register for before using Bing Maps controls and services:


<!DOCTYPE html>



<style type=”text/css”>

body {

    margin: 0;

    height: 100%;

    background-color: #404040;


#map {

     position: absolute;

    top: 50%;

    left: 50%;

    width: 800px;

    height: 600px;

    margin-left: -400px;

    margin-top: -300px;




<script charset=”UTF-8″ type=”text/javascript”




<script type=”text/javascript” src=”jquery.js”></script>


<script type=”text/javascript”>

    var _map;


    $(document).ready(function () {

        // Create a Bing map

        _map = new Microsoft.Maps.Map(document.getElementById(“map”),

            { credentials: “Insert Bing Maps API key here” });


        // Get the current position from the browser

        if (!navigator.geolocation)

            alert(“This browser doesn’t support geolocation”);


            navigator.geolocation.getCurrentPosition(onPositionReady, onError);



    function onPositionReady(position) {

        // Apply the position to the map

        var location = new Microsoft.Maps.Location(position.coords.latitude,


        _map.setView({ zoom: 18, center: location });


        // Add a pushpin to the map representing the current location

        var pin = new Microsoft.Maps.Pushpin(location);




    function onError(err) {

        switch (err.code) {

            case 0:

                alert(“Unknown error”);


            case 1:

                alert(“The user said no!”);


            case 2:

                alert(“Location data unavailable”);


            case 3:

                alert(“Location request timed out”);








<div id=”map” />





So how does it work? First, I point a <script> element to, which is home for the new Bing Maps AJAX control, version 7.0. Then I instantiate a Microsoft.Maps.Map object (the map) and insert it into the DIV named “map.” Next, I call HTML5’s navigator.geolocation.getCurrentPosition to get the latitude and longitude of my current location. When that call completes, I call setView on the map control, passing in the latitude and longitude provided by getCurrentPosition. For good measure, I create a pushpin at the same location so my current location is called out on the map. Not a lot of code, but a WHOLE lot of results!

Here’s what I found most surprising about this exercise. Testing it on my desktop PC, I wasn’t sure if the geolocation API would work. Even if it did work, I expected the accuracy to be low since the location data would have to come from Wi-fi positioning. In most browsers, the accuracy is good to within a few hundred feet. In IE9, it’s so accurate, it pinpointed the location of the router in my house! Most browsers, I believe, use a positioning service provided by Google to convert IP addresses into locations. (I know that’s true of Opera, because the first time an app running in Opera requests a location, Opera pops up a dialog and asks you to agree to Google terms and conditions.) IE9 evidently uses something different, which isn’t surprising given that Microsoft probably wouldn’t care to make their flagship browser dependent on anything Google provided. Whatever Microsoft is using, it’s amazingly accurate. Of course, your mileage may vary.

It’s pretty cool to know that with HTML5, you can write browser-based apps that, for example, use your current location to show nearby restaurants, movie theatres, and stores. But what’s even more alluring is the thought of building mobile apps that work across a range of devices. If I use Silverlight for Windows Phone to write a location-aware app, it only works on Windows phones. But if I use HTML5, it should work on iPhones, iPads, and even on Android devices. Once Windows Phone 7 acquires an HTML5 browser, it’ll work there, too.

Even HTML5 doesn’t insulate you from all the annoying differences between browsers; I still find myself spending way too much time trying to get something that works fine in Firefox working in IE9, too, or vice versa. But the geolocation API is so simple that there’s not a lot to break going from one browser to another. That’s good news for developers, and good news for consumers as well.

We help care providers make the most of the cloud.

We are a leading Microsoft Azure service provider offering a highly secure and compliant
private and public clouds for Protected Health Information (PHI) and Non-PHI environments.

Stay in Good Standing

Collaborate with Experts

Migrate Environments

Rely on our deep knowledge of critical security frameworks.

We take on your compliance and infrastructure concerns as an extension of your team or application vendors.

Our methodology encompasses design through deployment and focuses on delivering solutions which are realistically implementable.

Get up to $2,500 in Azure credits, free of charge.

We understand that evolving your IT can be costly.
We are offering you a unique opportunity to save money and get started faster.
You can put this money to a number of uses, including:

Assess and Migrate Your Existing Environment

Improve Your InfoSec and Compliance Program

Add Real-Time Monitoring and 24x7x365 Support

We right-size your systems and move them into a new environment.

We work closely with our customers to develop the right roadmap.

We deliver the peace of mind which comes from knowing your systems are expertly monitored.

We Know Healthcare

We are fortunate to count a number of leading care providers and healthcare vendors as our customers. We continue to grow this segment as companies turn to secure and compliant cloud solutions.

Our Customers Include:

All Care Services, CarePayment Technologies, Consonus Healthcare, Digital Visions, Fanno Creek Clinic, First Insight, Health Share of Oregon, Marquis Companies, MediPro Direct, Metropolitan Pediatrics, Navos, OCHIN, Oregon State Hospital, Planned Parenthood, ProtoCall Services, Salem Health, Seasons Management, The Portland Clinic, Touchmark, Vistalogic, WVP Health Authority.

Download Data Sheet View Case Study

Stay in Good Standing

  • Meet HIPAA/HITECH, HITRUST and PCI DSS compliance: >> Managed Compliance.
  • Ensure you are secure from design through deployment: >> Managed InfoSec.
  • Eliminate concerns about exposing your PHI and Non-PHI data when using the public cloud.
  • Define your objectives and build the right foundation using best practices and then execute it.
  • You gain the peace of mind that comes from knowing we have planned out your cloud to the smallest details and then made sure it delivers on your needs.

Collaborate with Experts

  • Plan out your cloud strategy without having to commit all your applications to the public cloud: >> Hybrid Approach.
  • Microsoft has the only viable hybrid strategy and expected to surpass AWS in market share by 2019.
  • We specialize in engineering, deploying and operating the right solution for your business by combining public and private Azure.
  • As one of the world’s five largest Microsoft cloud solution providers (CSP), we help you identify the optimal environment to run each application including you database and storage.

Migrate Existing Environments

  • We have expertise which minimizes redevelopment to move applications and data without recoding.
  • We leverage Microsoft Azure Site Recovery (ASR) which provides a simple way to move applications and data without having to redevelop the underlying cloud infrastructure.
  • We implement your new environment on a public or private cloud depending on your preferences and business requirements.
  • We enable access to complete and accurate PHI for better medical care.

We deliver solutions that accelerate the value of Azure.

Ready to experience the full power of Microsoft Azure?

Start Today

Blog Home

Stay Connected

Upcoming Events

All Events