DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Data Engineering
  3. Databases
  4. Learn WPF Using the Google Place API

Learn WPF Using the Google Place API

Learn the basics of WPF by playing around with the Google Place API and learning how to add navigation to your web applications.

Thiruppathi Rengasamy user avatar by
Thiruppathi Rengasamy
CORE ·
Jun. 28, 17 · Tutorial
Like (3)
Save
Tweet
Share
5.77K Views

Join the DZone community and get the full member experience.

Join For Free

introduction

in this article, we will learn wpf using google place api with the wpf control web browser in visual studio 2015.

in this article, we are going to:

  • create a wpf application.
  • using google place api.
  • configure the api.

create a wpf application

open visual studio 2015

wpf


select the file menu >new > click project.


wpf


select windows templates, and choose the wpf application. then click “ok “after filling in the name and location.

after you complete the solution explorer, it will load basic bundles.


wpf


open the maniwindow.xaml file and change it from <grid> to <dockpanel>. it will load based on resolution.


wpf


then drag a web browser from the toolbox to the 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 controls to get a 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. once you successfully login click here . in this site, you have to click the “get a key” button to flow through a process where you will:

  • create or select a project.
  • enable the api.
  • get an api key.

create and enable the api

create a project name and click the “create and enable api.”


wpf


get an api key

in this process, you are getting keys ready to use in your application, so copy the key and click the “finish” button.


wpf


configure the api

i have checked this key using the url below, and found out what the actual result is.

https://maps.googleapis.com/maps/api/distancematrix/xml?units=imperial&origins=washington,dc&destinations=new+york+city,ny&key= your_api_key


wpf


i have configured the uri and 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 a web browser.

wb.navigate("https://www.google.co.in/maps");

create the new class for retrieving and storing the values.

public class vmdistnce  
    {  
        public string durtion { get; set; }  
        public double distance { get; set; }  
}

output 1

wpf


then i get data from app.config.

string distanceapiurl = configurationmanager.appsettings["distanceapi"];  
string mykey = configurationmanager.appsettings["apikey"];   

here, i have used the web url to look for the ui and api url and used it to get the values of this search's 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 the api url, as follows:

"&mode=driving&sensor=false&language=en-en&units=imperial&key=”

but, per our users' needs, we can get the result from google place api.

after the calculation, i will navigate the web url to the web browser.

wb.navigate("https://www.google.co.in/maps/dir/"+txtorigins.text +"/"+txtdestinations.text);

run the application or click (f5)

output 2

wpf


visit my wpf article links given below.

  • learn wpf crud operations using vb.net

conclusion

in this article, we have learned wpf, using the google place api. if you have any queries, please tell me through the comments section. your comments are very valuable.

happy coding!

Google (verb) API Windows Presentation Foundation

Published at DZone with permission of Thiruppathi Rengasamy, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • How Observability Is Redefining Developer Roles
  • Upgrade Guide To Spring Data Elasticsearch 5.0
  • Mr. Over, the Engineer [Comic]
  • Express Hibernate Queries as Type-Safe Java Streams

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: