get the coordinates(latitude and longitude) of google map by street address - angular

Question

so i have random street address, lets say: 5707 dogwood ave. all i want is to get the coordinates of that address so i can view my google map at the street location using angular. i've search but wasn't able to find anything useful.

the map code(very basic map)

$scope.map = {
    center: {
        latitude: 33.025859,
        longitude: -96.844698
    },
    zoom: 8
};

html code:

<google-map class="full-image" center="map.center" zoom="map.zoom"></google-map>

Solution 1

You can use an http.get as such to make a GET request at Google's API endpoint and retrieve a json of the address's coordinates:

$http.get('http://maps.google.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&sensor=false').success(function(mapData) {
      angular.extend($scope, mapData);
    });

and you can call out the data at $scope.mapData

Refer to this StackOverflow post for more info: Google Maps API - Get Coordinates of address

Solution 2

Assuming you have the address you can use the Google Geocoding web service to manually retrieve the location coordinates. (I added a city and state to better refine the data) https://developers.google.com/maps/documentation/geocoding/

JSON:

http://maps.google.com/maps/api/geocode/json?address=5707%20dogwood%20ave.%20Rosamond,%20CA&sensor=false

XML:

http://maps.google.com/maps/api/geocode/xml?address=5707%20dogwood%20ave.%20Rosamond,%20CA&sensor=false

Alternately there is a javascript wrapper on the API

I would also review this post regarding how to deal with rate limiting if you will be exceeding 2,500 requests per day.

http://www.benbybenjacobs.com/blog/2013/09/11/google-geocoding-service-for-angularjs

Comments

[binoculars]

Does this still work? console.log($scope.mapData) outputs "undefined"...?