Export (0) Print
Expand All
26 out of 35 rated this helpful - Rate this topic

Displaying Location Search Results Using the REST Services

Bing

The Bing Maps AJAX Control, version 7.0 does not have built in functionality to return find results, but you can easily use the Bing Maps REST Services to geocode locations that you can then display on the map.

Initialize the Map

Before you add geocoding functionality, initialize the map using the following code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

      <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

      <script type="text/javascript">
         
         var map = null;
 
         function GetMap()
         {
            // Initialize the map
            map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Your Bing Maps Key", mapTypeId:Microsoft.Maps.MapTypeId.road}); 

         }
     
      </script>
   </head>
   <body onload="GetMap();">
      <div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
   </body>
</html>

Add Controls

For this sample, add a text box and a Geocode button. In your script, create a ClickGeocode function that is called when the button is clicked.

<input id="txtQuery" type="text" value="Portland"/>
<input type="button" value="Geocode" onclick="ClickGeocode()"/>       

Since the Bing Maps REST Services also require a Bing Maps Key, you need to first retrieve the key from the map object to ensure the session is valid. Use the getCredentials method of the Map Class to do this. The getCredentials method takes a function to call when the credentials are retrieved.

function ClickGeocode(credentials)
{
   map.getCredentials(MakeGeocodeRequest);
}

Make a Geocode REST Request

Next, make a geocode request to the Bing Maps REST Services using the value in the txtQuery input box and the credentials.

The Bing Maps REST Services can return an XML or JSON response object. For JavaScript code, JSON is more appropriate, so set output=JSON. This means that you need to also set a jsonp callback function name. In this sample the callback function is named GeocodeCallback. Finally, since you do not know if the text provided is a place name or an address, supply the locationQuery parameter and set it to the value of the txtQuery text box. Your REST geocode request looks like this:

var geocodeRequest = "http://dev.virtualearth.net/REST/v1/Locations?query=" + encodeURI(document.getElementById('txtQuery').value) + "&output=json&jsonp=GeocodeCallback&key=" + credentials;

Now add script to make the REST request.

         function MakeGeocodeRequest(credentials)
         {
            var geocodeRequest = "http://dev.virtualearth.net/REST/v1/Locations?query=" + encodeURI(document.getElementById('txtQuery').value) + "&output=json&jsonp=GeocodeCallback&key=" + credentials;

            CallRestService(geocodeRequest);
         }

         function CallRestService(request) 
         {
            var script = document.createElement("script");
            script.setAttribute("type", "text/javascript");
            script.setAttribute("src", request);
            document.body.appendChild(script);
         }
         function GeocodeCallback(result) 
         {   
            // Do something with the result
         }

Display the Results

Finally, add code to the GeocodeCallback function to set the map view to the found location and add a pushpin at that location. The final code is shown below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

      <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

      <script type="text/javascript">
         
         var map = null;
 
         function GetMap()
         {
            // Initialize the map
            map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Your Bing Maps Key", mapTypeId:Microsoft.Maps.MapTypeId.road}); 

         }

         function ClickGeocode(credentials)
         {
            map.getCredentials(MakeGeocodeRequest);
         }

         function MakeGeocodeRequest(credentials)
         {

            var geocodeRequest = "http://dev.virtualearth.net/REST/v1/Locations?query=" + encodeURI(document.getElementById('txtQuery').value) + "&output=json&jsonp=GeocodeCallback&key=" + credentials;

            CallRestService(geocodeRequest);
         }

         function GeocodeCallback(result) 
         {
            alert("Found location: " + result.resourceSets[0].resources[0].name);

            if (result &&
                   result.resourceSets &&
                   result.resourceSets.length > 0 &&
                   result.resourceSets[0].resources &&
                   result.resourceSets[0].resources.length > 0) 
            {
               // Set the map view using the returned bounding box
               var bbox = result.resourceSets[0].resources[0].bbox;
               var viewBoundaries = Microsoft.Maps.LocationRect.fromLocations(new Microsoft.Maps.Location(bbox[0], bbox[1]), new Microsoft.Maps.Location(bbox[2], bbox[3]));
               map.setView({ bounds: viewBoundaries});

               // Add a pushpin at the found location
               var location = new Microsoft.Maps.Location(result.resourceSets[0].resources[0].point.coordinates[0], result.resourceSets[0].resources[0].point.coordinates[1]);
               var pushpin = new Microsoft.Maps.Pushpin(location);
               map.entities.push(pushpin);
            }
         }

         function CallRestService(request) 
         {
            var script = document.createElement("script");
            script.setAttribute("type", "text/javascript");
            script.setAttribute("src", request);
            document.body.appendChild(script);
         }

      </script>
   </head>
   <body onload="GetMap();">
      <div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
      <input id="txtQuery" type="text" value="Portland"/>
      <input type="button" value="Geocode" onclick="ClickGeocode()"/>       
   </body>
</html>
Show:
© 2014 Microsoft. All rights reserved.