Created
September 28, 2019 17:30
-
-
Save prof3ssorSt3v3/1a6c030ab8b90dcb71c2eea4cb973c0f to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge" /> | |
| <title>Google Maps GeoCoding</title> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Reverse GeoCoding with Google Maps</h1> | |
| </header> | |
| <!-- write some stuff about a place here --> | |
| <script> | |
| const KEY = "AIzaSyD8LFh53VddzDevOC6A5Jhln9KgpmpoExg"; | |
| const LAT = 50.1; | |
| const LNG = -97.3; | |
| let url = `https://maps.googleapis.com/maps/api/geocode/json?latlng=${LAT},${LNG}&key=${KEY}`; | |
| fetch(url) | |
| .then(response => response.json()) | |
| .then(data => { | |
| console.log(data); | |
| let parts = data.results[0].address_components; | |
| document.body.insertAdjacentHTML( | |
| "beforeend", | |
| `<p>Formatted: ${data.results[0].formatted_address}</p>` | |
| ); | |
| parts.forEach(part => { | |
| if (part.types.includes("country")) { | |
| //we found "country" inside the data.results[0].address_components[x].types array | |
| document.body.insertAdjacentHTML( | |
| "beforeend", | |
| `<p>COUNTRY: ${part.long_name}</p>` | |
| ); | |
| } | |
| if (part.types.includes("administrative_area_level_1")) { | |
| document.body.insertAdjacentHTML( | |
| "beforeend", | |
| `<p>PROVINCE: ${part.long_name}</p>` | |
| ); | |
| } | |
| if (part.types.includes("administrative_area_level_3")) { | |
| document.body.insertAdjacentHTML( | |
| "beforeend", | |
| `<p>LEVEL 3: ${part.long_name}</p>` | |
| ); | |
| } | |
| }); | |
| }) | |
| .catch(err => console.warn(err.message)); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thank you Steve, but there is just one issue
when I try to access this on my android phone the postal_code is not printed,
see in screenshot
https://prnt.sc/12ca11o
the last line is missing
where as in PC
https://prnt.sc/12ca20a
any idea why? Can you help me with this