Using the REST Services with the Core Map Control

  • Article

You are not viewing the latest version of the AJAX control. Bing Maps AJAX V7 is the recommended JavaScript control for Bing Maps. If you need this documentation, it is available in as a CHM or PDF download.

This topic describes how to use the core version of the Bing Maps AJAX Control 6.3 and the Bing Maps REST Services to create a simple page that geocodes a given place or address string and adds a pushpin to the map at that location.

Load the Core Map Control

Before you add geocoding functionality, load the core version of the map control using the following code. The core map control is described in Using the Core Map Control.

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

      <script type="text/javascript" src="https://ecn.dev.virtualearth.net/MapControl/mapcontrol.ashx?v=6.3c"></script>

      <script type="text/javascript">

         var map = null;
 
         function GetMap()
         {
            map = new VEMap('myMap');
            map.LoadMap();
         }

      </script>
   </head>
   <body onload="GetMap();">
      <div id='myMap' 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()"/>

Make a REST Geocode Request

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

Note

The Bing Maps REST Services requires a Bing Maps Key. You can get a key by signing up for a free Bing Maps developer account at https://www.bingmapsportal.com.

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 = "https://dev.virtualearth.net/REST/v1/Locations/" + document.getElementById('txtQuery').value + "?output=json&jsonp=GeocodeCallback&key=BingMapsKey";

Now add script to make the REST request.

         function ClickGeocode()
         {
            var geocodeRequest = "https://dev.virtualearth.net/REST/v1/Locations/" + document.getElementById('txtQuery').value + "?output=json&jsonp=GeocodeCallback&key=BingMapsKey";

            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 Result

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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title>Core Map Control Sample</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

      <script type="text/javascript" src="https://ecn.dev.virtualearth.net/MapControl/mapcontrol.ashx?v=6.3c"></script>

      <script type="text/javascript">

         var map     = null;
 
         function GetMap()
         {
            map = new VEMap('myMap');
            map.LoadMap();
         }

         function ClickGeocode()
         {
            var geocodeRequest = "https://dev.virtualearth.net/REST/v1/Locations/" + document.getElementById('txtQuery').value + "?output=json&jsonp=GeocodeCallback&key=BingMapsKey";

            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;
               map.SetMapView(new VELatLongRectangle(new VELatLong(bbox[0], bbox[1]), new VELatLong(bbox[2], bbox[3])));

               // Add a pushpin at the found location
               var latlong = new VELatLong(result.resourceSets[0].resources[0].point.coordinates[0], result.resourceSets[0].resources[0].point.coordinates[1]);
               var pushpin = new VEShape(VEShapeType.Pushpin, latlong);
               map.AddShape(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='myMap' style="position:relative; width:400px; height:400px;"></div>
      <input id="txtQuery" type="text" value="Portland"/><input type="button" value="Geocode" onclick="ClickGeocode()"/>
   </body>
</html>

See Also

Concepts

Using the Core Map Control