Use Bing Maps REST Services with jQuery to build an autocomplete box and find a location dynamically

Saturday, February 26, 2011 2:46 PM

Vivien Chevallier

In this article we will discover how to build an autocomplete box with Bing Maps REST Services by using only HTML, JSON and jQuery.

Bing Maps REST Services allows us to perform tasks such as creating a map with pushpins, geocoding an address, retrieving imagery metadata, or creating a route.

Here we will learn to use the Locations API of Bing Maps REST Services to build an autocomplete box with jQuery. To be able to reach Bing Maps services, you will need a Bing Maps key. Just go to the Bing Maps Account Center to get one.

 

Creation

First, we will create a simple HTML page with references to jQuery and jQuery UI, an input for the searched location and a div in which the results will be displayed.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Use Bing Maps REST Services with jQuery to build an autocomplete box and find a location dynamically</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.js" type="text/javascript"></script>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        #searchBox
        {
            width: 25em;
        }
    </style>
</head>
<body>
    <div>
        <div class="ui-widget">
            <label for="searchBox">
                Search:
            </label>
            <input id="searchBox" />
        </div>
        <div id="searchResult" class="ui-widget" style="margin-top: 1em;">
        </div>
    </div>
</body>
</html>

 

To call the Locations API we use the following url: http://dev.virtualearth.net/REST/v1/Locations

Parameters are required to get a response from the service:

The Bing Maps REST Services also have other optional parameters such as:

 

To create an autocomplete box, we use jQuery UI. The source of the suggestions provided to the user will come from Bing Maps REST Services.

The operation is as follows: when the user type a location, an Ajax request is triggered to call the Locations API of Bing Maps REST Services and a JSON response is received. The response is processed to be displayed as suggestions to the user. Here is the JavaScript to do it:

<script type="text/javascript">
    $(document).ready(function () {
        $("#searchBox").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "http://dev.virtualearth.net/REST/v1/Locations",
                    dataType: "jsonp",
                    data: {
                        key: "<yourbingmapskey>",
                        q: request.term
                    },
                    jsonp: "jsonp",
                    success: function (data) {
                        var result = data.resourceSets[0];
                        if (result) {
                            if (result.estimatedTotal > 0) {
                                response($.map(result.resources, function (item) {
                                    return {
                                        data: item,
                                        label: item.name + ' (' + item.address.countryRegion + ')',
                                        value: item.name
                                    }
                                }));
                            }
                        }
                    }
                });
            },
            minLength: 1
        });
    });
</script>

 

We have to pay attention to several things here:

 

For example, when a user search "San Francisco", the following Ajax request url is built and called:

http://dev.virtualearth.net/REST/v1/Locations?jsonp=<callbackname>&key=<yourbingmapskey>&q=San+francisco&_=1298745707161

 

The final working page source looks like below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Use Bing Maps REST Services with jQuery to build an autocomplete box and find a location dynamically</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.js" type="text/javascript"></script>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .ui-autocomplete-loading
        {
            background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
        }
        #searchBox
        {
            width: 25em;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#searchBox").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "http://dev.virtualearth.net/REST/v1/Locations",
                        dataType: "jsonp",
                        data: {
                            key: "<yourbingmapskey>",
                            q: request.term
                        },
                        jsonp: "jsonp",
                        success: function (data) {
                            var result = data.resourceSets[0];
                            if (result) {
                                if (result.estimatedTotal > 0) {
                                    response($.map(result.resources, function (item) {
                                        return {
                                            data: item,
                                            label: item.name + ' (' + item.address.countryRegion + ')',
                                            value: item.name
                                        }
                                    }));
                                }
                            }
                        }
                    });
                },
                minLength: 1,
                change: function (event, ui) {
                    if (!ui.item)
                        $("#searchBox").val('');
                },
                select: function (event, ui) {
                    displaySelectedItem(ui.item.data);
                }
            });
        });

        function displaySelectedItem(item) {
            $("#searchResult").empty().append('Result: ' + item.name).append(' (Latitude: ' + item.point.coordinates[0] + ' Longitude: ' + item.point.coordinates[1] + ')');
        }
    </script>
</head>
<body>
    <div>
        <div class="ui-widget">
            <label for="searchBox">
                Search:
            </label>
            <input id="searchBox" />
        </div>
        <div id="searchResult" class="ui-widget" style="margin-top: 1em;">
        </div>
    </div>
</body>
</html>

 

Demo video

 

Links

Several links that will help you to understand and go further on the subject:

 
 

Summary

We have seen how to use Bing Maps REST Services with jQuery, jQuery UI to build an autocomplete box and find a location dynamically. As we are using HTML, JSON and jQuery, this can be integrated with whatever technology you prefer.

If you want to go further, take a look at the links above to understand what you can do with Bing Maps REST Services. For example, we could display the selected location on a map with Bing Maps AJAX Control or Bing Maps Silverlight Control. This will certainly be the next subject of one of my future articles in addition to this one.

You can download the full sources here:

Download full sources

 

Please feel free to comment or contact me if you have any question about this article.

  1. Microsoft
  2. Bing Maps

Comments

Add a comment

(Will not be published)

Back to articles