Google Maps Geocoding

1.Generate a key to enable you to use the Google

Geocoding API https://developers.google.com/maps/documentation/geocoding/start

2.In the Starter zip file attached, edit the app.js file, set up the following URL in a variable - https://maps.googleapis.com/maps/api/place/textsearch/json?key=< your key here>

3.Set up a click event for the button

4.In the click event, you will add a query string to this url having the value of the address string.

Ex. var googleGeoUrl = "https://maps.googleapis.com/maps/api/geocode/json?key=< your key here>"

5. You can try this URL in your browser to see the results something like below. Note that it takes a parameter called address.

https://maps.googleapis.com/maps/api/geocode/json?key=%20AIzaSyCdbm1smUCp58Dq_j6TYcXKkp3LuBzQeUk&address=4300%20George%20Way%20CA

As you can see we could get multiple results if the address is partial.

{
"results" : [
{
"address_components" : [
{
"long_name" : "4300",
"short_name" : "4300",
"types" : [ "street_number" ]
},
{
"long_name" : "King George Boulevard",
"short_name" : "King George Blvd",
"types" : [ "route" ]
},
{
"long_name" : "Surrey",
"short_name" : "Surrey",
"types" : [ "locality", "political" ]
},
{
"long_name" : "Greater Vancouver",
"short_name" : "Greater Vancouver",
"types" : [ "administrative_area_level_2", "political" ]
},
{
"long_name" : "British Columbia",
"short_name" : "BC",
"types" : [ "administrative_area_level_1", "political" ]
},
{
"long_name" : "Canada",
"short_name" : "CA",
"types" : [ "country", "political" ]
},
{
"long_name" : "V3S",
"short_name" : "V3S",
"types" : [ "postal_code", "postal_code_prefix" ]
}
],
"formatted_address" : "4300 King George Blvd, Surrey, BC V3S, Canada",
"geometry" : {
"bounds" : {
"northeast" : {
"lat" : 49.0798868,
"lng" : -122.8210325
},
"southwest" : {
"lat" : 49.0798844,
"lng" : -122.8210509
}
},
"location" : {
"lat" : 49.0798868,
"lng" : -122.8210509
},
"location_type" : "RANGE_INTERPOLATED",
"viewport" : {
"northeast" : {
"lat" : 49.08123458029149,
"lng" : -122.8196927197085
},
"southwest" : {
"lat" : 49.0785366197085,
"lng" : -122.8223906802915
}
}
},
"partial_match" : true,
"place_id" : "Ei00MzAwIEtpbmcgR2VvcmdlIEJsdmQsIFN1cnJleSwgQkMgVjNTLCBDYW5hZGE",
"types" : [ "street_address" ]
},
{
"address_components" : [
{
"long_name" : "4300",
"short_name" : "4300",
"types" : [ "street_number" ]
},
{
"long_name" : "Saint George Street",
"short_name" : "St George St",
"types" : [ "route" ]
},
{
"long_name" : "Dresden",
"short_name" : "Dresden",
"types" : [ "locality", "political" ]
},
{
"long_name" : "Chatham-Kent Division",
"short_name" : "Chatham-Kent Division",
"types" : [ "administrative_area_level_2", "political" ]
},
{
"long_name" : "Ontario",
"short_name" : "ON",
"types" : [ "administrative_area_level_1", "political" ]
},
{
"long_name" : "Canada",
"short_name" : "CA",
"types" : [ "country", "political" ]
},
{
"long_name" : "N0P 1M0",
"short_name" : "N0P 1M0",
"types" : [ "postal_code" ]
}
],
"formatted_address" : "4300 St George St, Dresden, ON N0P 1M0, Canada",
"geometry" : {
"bounds" : {
"northeast" : {
"lat" : 42.5985733,
"lng" : -82.17926159999999
},
"southwest" : {
"lat" : 42.5985727,
"lng" : -82.1792804
}
},
"location" : {
"lat" : 42.5985727,
"lng" : -82.17926159999999
},
"location_type" : "RANGE_INTERPOLATED",
"viewport" : {
"northeast" : {
"lat" : 42.5999219802915,
"lng" : -82.17792201970849
},
"southwest" : {
"lat" : 42.5972240197085,
"lng" : -82.1806199802915
}
}
},
"partial_match" : true,
"place_id" : "Ei40MzAwIFN0IEdlb3JnZSBTdCwgRHJlc2RlbiwgT04gTjBQIDFNMCwgQ2FuYWRh",
"types" : [ "street_address" ]
}
],
"status" : "OK"
}

6. Then you will make a JSON call using this URL and parse the results to build the HTML

7. Display the following:

• Display the formatted address.
• Display the short address. To build this look at the address_components.short_name.
• Display the long address. To build this look at the address_components.long_name.
• Display the above for all the addresses that you get back separated by a horizontal line.

Formulate your HTML and then populate it in the html in the div having id googleResults

Sample output: see image.