locked
Parse JSON response from Google Maps Webservice like Geocoding API using WinJS.xhr and display it on Google Map on Win 8 App. RRS feed

  • Question

  • I want to use Google Maps webservices like Geocoding API , Direction API and display so fetched data on Google Map on Windows 8 App.
    So i want to know how can we parse JSON response given by such webservices using Windows JS library feature like "xhr" and use so parsed data to display the asked location on google map?

    Please write a sample code for Webservice request "http://maps.googleapis.com/maps/api/geocode/json?address=Ahmedabad&sensor=false"
    if possible. So i will able to display "Ahmedabad" on Google Maps in win 8 app. I tried below code but it did not work. lat1 & lng1 remains "null" outside  WinJS.xhr block. I am not able to know why it happens .
     
        var address1 = "http://maps.googleapis.com/maps/api/geocode/json?address=Ahmedabad&sensor=false";
        var lat1;
        var lng1;
        var place1;
    
                WinJS.xhr({ url: address1 }).then(function (response) {
    
                    place1 = JSON.parse(response.response);
                    lat1 = place1.results[0].geometry.location.lat;
                    lng1 = place1.results[0].geometry.location.lng;
                });
            
        
        //var location = new google.maps.LatLng(lat1,lng1);
        var location1 = new google.maps.LatLng(lat1, lng1);
        function initialize() {
            var mapOptions = {
                center: location1,
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map-canvas"),
                mapOptions);
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    

    Sunday, April 14, 2013 11:50 PM

Answers

  • I think Jeff is right. You're using lat1 and lng1 before they're initialized.

    That's because you're doing the xhr request and the next thing that runs is this code 

     var location1 = new google.maps.LatLng(lat1, lng1);
        function initialize() {
            var mapOptions = {
                center: location1,
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map-canvas"),
                mapOptions);
        }
        google.maps.event.addDomListener(window, 'load', initialize);

    That happens before your xhr request returned, so before this code executed:

                 place1 = JSON.parse(response.response);
                    lat1 = place1.results[0].geometry.location.lat;
                    lng1 = place1.results[0].geometry.location.lng;

    From my point of view the most easy solution would be to put all your code into the .then handler of your xhr request

    Monday, April 29, 2013 3:19 PM

All replies

  • Hi Nishant,

    This would require knowledge of the google map API.  You should try the google forums with assistance with that API.

    As far as the JSON coming back from the api, how have you debugged this so far?  What is the response coming back from the api call?

    -Jeff


    Jeff Sanders (MSFT)

    Monday, April 15, 2013 6:29 PM
    Moderator
  • Hi,

    Sorry for delay in response from my side. And to your reply , yes i know how to use Google Maps API. But i faced problem in JSON parsing . In the above code , variables lat1 & lng1 get correct parsed values ( so response is perfect and parsing too ) but i don't know why they do not retain it outside winJS.xhr block . So it was showing lat1 & lng1 undefined error. So i tried different way. I called initialize() function in winJS.xhr block itself. So result was the retain on lat1 & lng1 values and i was able to display them successfully on Map. But yet i haven't got the ans of why lat1 & lng1 do not retain their values outside winJS.xhr though they are global variables. So why there is problem of scope? If you find any solution on that please post. Because the solution which i used is not quite useful and may create problem in my code. 

    Thank You
    Friday, April 26, 2013 9:40 PM
  • Hi N,

    With out a repro of your problem it will be nearly impossible to tell what the issue may be (perhaps post a simple repro to SkyDrive).

    Perhaps you are not waiting for the async xhr response to fill in the values before you attempt to use then later in your code?

    Again, the debugger would tell you exactly the sequence of that is happening and would give you a hint.

    -Jeff


    Jeff Sanders (MSFT)

    @jsandersrocks - Windows Store Developer Solutions @WSDevSol
    Getting Started With Windows Azure Mobile Services development? Click here
    Getting Started With Windows Phone or Store app development? Click here
    My Team Blog: Windows Store & Phone Developer Solutions
    My Blog: Http Client Protocol Issues (and other fun stuff I support)

    Monday, April 29, 2013 11:54 AM
    Moderator
  • I think Jeff is right. You're using lat1 and lng1 before they're initialized.

    That's because you're doing the xhr request and the next thing that runs is this code 

     var location1 = new google.maps.LatLng(lat1, lng1);
        function initialize() {
            var mapOptions = {
                center: location1,
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map-canvas"),
                mapOptions);
        }
        google.maps.event.addDomListener(window, 'load', initialize);

    That happens before your xhr request returned, so before this code executed:

                 place1 = JSON.parse(response.response);
                    lat1 = place1.results[0].geometry.location.lat;
                    lng1 = place1.results[0].geometry.location.lng;

    From my point of view the most easy solution would be to put all your code into the .then handler of your xhr request

    Monday, April 29, 2013 3:19 PM
  • Hey Andre,

    Aha.  I did not realize that all that code was in one function.  I thought this was just snippets of code (again the perils of not giving enough info).  If your assumption is right that is most definitely the problem.  Thanks for spotting that for Nishant.

    -Jeff


    Jeff Sanders (MSFT)

    @jsandersrocks - Windows Store Developer Solutions @WSDevSol
    Getting Started With Windows Azure Mobile Services development? Click here
    Getting Started With Windows Phone or Store app development? Click here
    My Team Blog: Windows Store & Phone Developer Solutions
    My Blog: Http Client Protocol Issues (and other fun stuff I support)

    Monday, April 29, 2013 3:21 PM
    Moderator
  • Hello Sir,

             I am new to App development. So i was not knowing how to use .then handler. But now i know something about it. So this must be the issue.. Thanks for your support.
    Sunday, May 19, 2013 9:43 PM
  • Hello Sir,
     
             Yes i put all things in one code as i am quite new to app development and don't know in details about xhr & .then handler. But yes this would be the issue. I will try the solution given by Andre Sir. Thanks a lot for your support. And yes thanks for your blog links too , i was searching for these type of blogs especially azure mobile services.

          
    Sunday, May 19, 2013 9:47 PM