how does facebook check-in works with Bing maps API with facebook pages (PART 1/3)

This is another post after Facebook custom stories for facebook application which made me more crazy to learn about the Bing Maps API to retrieve maps using AJAX 7 technique or REST API service provided by MICROSOFT.

you guys would be fascinated in updating status and photos ,events and others with check-in places and tag with your friends.Generally facebook always displays the Bing Maps for those check-in.These check-ins are actually born at Pages/place you create and give access via GPS to locate your device and get Latitude and longitude details to query Bing maps API and obtain maps to display to users and friends.

There are lot of parameters in getting map for exact location and corresponding maps for various platforms with various methods.i am here discussing about web(desktop) Rest API request and AJAX 7.

first of all let us see how to make location based request with BING API in this post:

1) Go to Bing Maps API and register a new Application with Microsoft Live Account.

2) Create a Bing Map KEY for retrieval and authentication purpose(generally making API calls secure from anonymous calls)

3) Create with BASIC keys and provide as NON PROFIT as category for safer side usage.

4) Copy your KEY which is registered with correct Domain name URL.

Lets have a look at the simplest BING MAPS API CODE to retrieve location based on QUERY.

     <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:"Aoyuj93YnzHbS8ZBLA6sdcvsdvzcxvcsyv2ASBjCJlICSIVobIZt3bZhwTzr-egVhMmlf-f8IKpM", 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>

See the Pen facebook like check-in [part 1/2] basic usage of bing API by s.shivasurya (@shivasurya) on CodePen.

Demo here - LINK 

so what happens in above code as simple and short and sweet:

1) we got the key from Bing API official used them rite at the place (credential mentioned in code)

2) using the key we made a user query place(eg:coimbatore) and which is sent via URL as REST API CALL with javascript help.

3) after STATUS 200 we get the result in JSON/XML (as we mention in URL PART)

4) by appending the result in browser we could get the place with Pushpin and we could get LATITUDE/LONGITUDE info also here which can be stored in database.

5) note that the resultant map is in form of Image as tiles (parts) can be saved and used personally.and the link can be useful later part.

thus we have successfully queried a place with longitud/latitude and an image.with this in next tutorial i would explain how pages/events/status check-in's works and btw we could create simple Check-in applications also.

i have tested this above code worled well and came across many errors! you can discuss errors with me hope i can provide solutions as comments/Email,Share is Care.