{"id":427,"date":"2021-01-11T13:09:19","date_gmt":"2021-01-11T12:09:19","guid":{"rendered":"https:\/\/fileidea.com\/?p=427"},"modified":"2021-01-11T13:11:51","modified_gmt":"2021-01-11T12:11:51","slug":"get-longitude-and-latitude-from-an-address-with-google-maps-programmatically","status":"publish","type":"post","link":"https:\/\/fileidea.com\/2021\/01\/11\/get-longitude-and-latitude-from-an-address-with-google-maps-programmatically\/","title":{"rendered":"Get longitude and latitude from an Address with Google Maps programmatically"},"content":{"rendered":"\n

After some Googling on how to get Longitude and Latitde from an address using the Maps JavaScript API I soon understood that you actually can’t use this particular API, it is only for displaying the map, but you can easily use another api to do this which works in the same way. <\/p>\n\n\n\n

The API we need to use to achieve this is Geocoding API. There you can easily get the longitude and latitude from an address of your choosing. You can complete the previous post if you want to keep up with setting up a project which uses Google Maps <\/a>to display the visual map, but you can understand how to get the longitude and latitude from an address just by reading this post too!<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Okay first, enable the API for Geocoding<\/a>.<\/p>\n\n\n\n

Then have your API key ready which you can get from clicking manage when you found that API and then click on Credentials<\/strong>. Under API Keys<\/strong> is your API key.<\/p>\n\n\n\n

. We can get the details of the Google map location by passing in an address into the URL in this manner:<\/p>\n\n\n

\nhttps:\/\/maps.googleapis.com\/maps\/api\/geocode\/json?address=Zimbabwe&key=MYAPIKEY\n<\/pre><\/div>\n\n\n
Obviously you must replace MYAPIKEY <\/strong>with your actual API key and then address works just like you would search on an address in Google Maps<\/a>. Let’s add this to our application! <\/p>\n\n\n\n
I have a LocationService where I am going to add Observable property called locations:<\/p>\n\n\n
\n  locations: Observable<Object>\n<\/pre><\/div>\n\n\n
Then I am going get HttpClient to the constructor:<\/p>\n\n\n
\nconstructor(httpClient: HttpClient)  \n<\/pre><\/div>\n\n\n
Then add the code for retrieving the Google Maps location data inside the constructor:<\/p>\n\n\n
\n  constructor(httpClient: HttpClient) { \n    this.locations = httpClient.get('https:\/\/maps.googleapis.com\/maps\/api\/geocode\/json?address=Zimbabwe&key=MYAPIKEY') .pipe(\n      map((data) => {\n        return data;\n      }),\n      catchError(val => {\n        return of(val)\n      }),\n    );\n  }\n<\/pre><\/div>\n\n\n
Then inside a component we call on the method to try it out:<\/p>\n\n\n
\n locationService.locations.subscribe(l => {\n      console.log(l);\n    });\n<\/pre><\/div>\n\n\n
\"\"<\/figure>\n\n\n\n
When we run the application we can see the console.log of the data we get back which is indeed the Google location we wanted (Zimbabwe). That’s basically it! <\/p>\n\n\n\n
Now as said previously, I have continued on my previous angular app with google maps <\/a>project, so we already have the code for showing map markers, and a method to add locations where we want the markers. So what I’ll do is that I go through each location result and add a pin to our Google Map, like this:<\/p>\n\n\n
\n    locationService.locations.subscribe((l: any) => {\n      l.results.forEach(element => {\n        this.addMarker(element.geometry.location)\n      });\n    });\n<\/pre><\/div>\n\n\n
Now when we look at the map we will see Zimbabwe since that is the address I put into the search url:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
https:\/\/maps.googleapis.com\/maps\/api\/geocode\/json?address=Zimbabwe&key=MYAPIKEY<\/a><\/p>\n\n\n\n
It’s that easy!<\/p>\n","protected":false},"excerpt":{"rendered":"
After some Googling on how to get Longitude and Latitde from an address using the Maps JavaScript API I soon understood that you actually can’t use this particular API, it is only for displaying the map, but you can easily use another api to do this which works in the same way. The API we … <\/p>\n
Continue reading “Get longitude and latitude from an Address with Google Maps programmatically”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[31,16,1],"tags":[43],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/posts\/427"}],"collection":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":0,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"wp:attachment":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}