Introduction
In this article, we will learn WPF, using Google Place API with WPF control web browser in Visual Studio 2015.
In this article, we are going to
- Create WPF Application
- Using Google Place API
- Configure The API
Create WPF Application
Open Visual Studio 2015
Select the File menu >New > Click Project
Select windows templates & choose the WPF Application. Then click “ok “button after fill the name & location.
After complete the solution explorer, it will load basic bundles
Open the ManiWindow.xaml file and Change from <Grid> to <DockPanel>. It will load based on resolution.
Then Drag web browser from Toolbox to Designer window
- <DockPanel Height="262" VerticalAlignment="Top" Margin="-1,94,-0.4,0">
- <WebBrowser Name="Wb" Margin="0,0,0,-113" />
- </DockPanel>
Adding some extra Control for getting result.
- <TextBox HorizontalAlignment="Left" Text=" " Name="txtOrigins" Height="23" Margin="92,10,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="163"/>
- <TextBox HorizontalAlignment="Left" Text=" " Name="txtDestinations" Height="23" Margin="387,10,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="170" />
- <Label Content="Origins" HorizontalAlignment="Left" Margin="10,7,0,0" VerticalAlignment="Top" FontWeight="Bold" FontSize="14"/>
- <Label Content="Destinations" HorizontalAlignment="Left" Margin="283,7,0,0" VerticalAlignment="Top" FontWeight="Bold" FontSize="14"/>
- <TextBox HorizontalAlignment="Left" Name="txtDistance" IsReadOnly="True" Height="23" Margin="92,63,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="163"/>
- <TextBox HorizontalAlignment="Left" Name="txtDuration" IsReadOnly="True" Height="23" Margin="387,63,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="170" />
- <Label Content="Distance" HorizontalAlignment="Left" Margin="21,60,0,0" VerticalAlignment="Top" FontWeight="Bold" FontSize="14"/>
- <Label Content="Duration" HorizontalAlignment="Left" Margin="307,60,0,0" VerticalAlignment="Top" FontWeight="Bold" FontSize="14"/>
- <Button Content="Calculate" HorizontalAlignment="Left" Name="btnFind" Margin="585,7,0,0" VerticalAlignment="Top" Width="75" Height="29" Background="#FFA61195" FontWeight="Bold" Foreground="#FFF7F2F2" FontSize="14" Click="btnFind_Click"/>
Using Google Place API
If you're going to use Google API, you must sign up for a Gmail account, here. Once you successfully login click here. In this site you have to click “GET a Key” button below to flow through a process where you will
- Create or select a project
- Enable the API
- Get an API Key
Create and Enable API
Create a project name & click the “CREATE AND ENABLE API”
Get an API Key
In this process you are getting keys ready to use your application, so copy the key and click “FINISH” Button.
Configure the API
https://maps.googleapis.com/maps/api/distancematrix/xml?units=imperial&origins=Washington,DC&destinations=New+York+City,NY&key=YOUR_API_KEY
I have checked this key using the URL and finding out what an actual result is.
I have configured the URI & Key in APP.CONFIG
- <?xml version="1.0" encoding="utf-8" ?>
- <configuration>
- <startup>
- <supportedRuntime version="v4.0" sku=".NETFramework,Version=v4.6" />
- </startup>
- <appSettings>
- <add key="DistanceApi" value="http://maps.googleapis.com/maps/api/distancematrix/xml?origins=" />
- <add key="ApiKey" value="AIzaSyCo9WJ7uQJIIrJVm1dDFCZwu9o1GJ8oQoM" />
- </appSettings>
- </configuration>
Code behind
First I have initiated the URL for web browser
Wb.Navigate("https://www.google.co.in/maps");
Create the new class for retrieving & storing the values.
- public class vmDistnce
- {
- public string durtion { get; set; }
- public double distance { get; set; }
- }
Output 1
Then I get data from App.config
- string DistanceApiUrl = ConfigurationManager.AppSettings["DistanceApi"];
- string myKey = ConfigurationManager.AppSettings["ApiKey"];
Here I have used the web URL looking for UI & API URL getting the values of result. Once you click the “Calculate” button follow the below code.
- vmDistance objDistance = new vmDistance();
- try
- {
- string DistanceApiUrl = ConfigurationManager.AppSettings["DistanceApi"];
- string myKey = ConfigurationManager.AppSettings["ApiKey"];
- string url = DistanceApiUrl + txtOrigins.Text + "&destinations=" + txtDestinations.Text"&mode=driving&sensor=false&language=en-EN&units=imperial&Key="+ myKey;
- HttpWebRequest request = (HttpWebRequest)WebRequest.Create(url);
- WebResponse response = request.GetResponse();
- Stream dataStream = response.GetResponseStream();
- StreamReader sreader = new StreamReader(dataStream);
- string responsereader = sreader.ReadToEnd();
- response.Close();
- DataSet ds = new DataSet();
- ds.ReadXml(new XmlTextReader(new StringReader(responsereader)));
- if (ds.Tables.Count > 0)
- {
- if (ds.Tables["element"].Rows[0]["status"].ToString() == "OK")
- {
- objDistance.durtion = Convert.ToString(ds.Tables["duration"].Rows[0]["text"].ToString().Trim());
- objDistance.distance = Convert.ToDouble(ds.Tables["distance"].Rows[0]["text"].ToString().Replace("mi", "").Trim());
- }
- }
- txtDuration.Text = objDistance.durtion;
- txtDistance.Text = Convert.ToString(objDistance.distance);
- }
- catch (Exception ex)
- {
- MessageBox.Show ("Error in calculating Distance!" + ex.Message);}
I have added the distance mode in API URL
"&mode=driving&sensor=false&language=en-EN&units=imperial&Key=”
But as per our needs we can get the result from Google place api.
After the calculation, I will navigate Web URL to web browser.
Wb.Navigate("https://www.google.co.in/maps/dir/"+txtOrigins.Text +"/"+txtDestinations.Text);
Run the application Or Click (F5)
Output 2
Visit my WPF article links given below.
Conclusion
In this article, we have learned WPF, using Google Place API. If you have any queries, please tell me through the comments section. Your comments are very valuable.
Happy Coding.....