Using Google Places API in Windows Phone Apps

This summer, I had an application idea on my mind in which I needed to use Google Places API. I searched the Internet many times, read lots of blog posts, but couldn't achieve retrieving and handling json data no matter what I tried. Finally, I found the solution thanks to Microsoft MVP Engin Polat. In this post, I am going to show it to you with a very simple sample.

After making your Windows Phone 8.1 project the first thing you need to do is adding a listview control to MainPage.xaml, and defining a data template to display the items provided us by Google Places API. You can establish the data template by using the ItemTemplate property of the listview control.

<ListView x:Name="placesListView">   

   <ListView.ItemTemplate>      

      <DataTemplate>         

         <StackPanel Orientation="Vertical">

            <TextBlock Text="{Binding name}" FontSize="25" />

            <TextBlock Text="{Binding geometry.latitude.lat}" FontSize="25" Margin="0,0,0,10" />

         </StackPanel>

      </DataTemplate>

   </ListView.ItemTemplate>

</ListView>

Above, you can see the data template definition. The data template contains a StackPanel with two textblocks which are listed in a vertical order since I set the orientation property of my listview control as vertical. The textblocks are bound to some properties named name and lat. I will come to them later on. Now it is time to retrive json data from Google Places Api in the code-behind. Open MainPage.xaml.cs and go to OnNavigatedTo method. This method is called when the page is loaded.

protected override async void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    var client = new HttpClient();

    var result = await client.GetStringAsync("https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=41.070623,29.017527&radius=500&types=taxi_stand&key=YOUR_KEY_HERE");
            
    var placesList = JsonConvert.DeserializeObject<RootObject>(result);

    placesListView.ItemsSource = placesList.results;
}

In OnNavigatedTo method, first we define a HttpClient object called client, and a variable called result that stores the json string returned from the GetStringAsync method. Remember to put your places api key at the end of the url. You can get a key from this page. Then, we convert the json data we have got from GetStringAsync method to a RootObject object called placesList, and set the ItemsSource property of placesListView to the results property of placesList. Please note that to be able to convert the json data, you have to install json-net package using NuGet package manager, and decleare the classes below in MainPage.xaml.cs file. json2csharp is a helpful website that allows us to generate classes from json or url.

public class Location
{
    public double lat { get; set; }
    public double lng { get; set; }
}

public class Geometry
{
    public Location location { get; set; }
}

public class Result
{
    public Geometry geometry { get; set; }
    public string icon { get; set; }
    public string id { get; set; }
    public string name { get; set; }
    public string place_id { get; set; }
    public string reference { get; set; }
    public string scope { get; set; }
    public List<string> types { get; set; }
    public string vicinity { get; set; }
}

public class RootObject
{
    public List<object> html_attributions { get; set; }
    public List<Result> results { get; set; }
    public string status { get; set; }
}

Let's go back to MainPage.xaml. The textblocks inside the data template are bound to name and lat properties. If you look at the properties defined in the classes above, you can spot the name property of Result class and the lat property of Location class.

I tried to be clear as much as I can. If there is something that you couldn't understand or that is wrong, please let me know in the comments section.

Please click here to download the sample project.