Quickly Use Street Address with Google Maps in Angular

Posted on Jan 12, 2015

Both being Google technologies, you would expect that using Google Maps with Angular would be pretty easy. While that is generally true, there is also an abundance of documentation that can actually create some confusion. One might also expect Google Maps to take a street address, but that is not the case. Google Maps requires latitude and longitude values, which you can receive using the Google Geocoding API. This post will cover the bare minimum required to get Google Maps working with Angular.

1. Install angular-google-maps

The following is a summary of the installation instructions for Angular-UI Google Maps library with some clarification.

Ideally, use Bower: bower install --save angular-google-maps

… or else you will also have to manually install lodash.js.

2. Include Scripts

Then include lodash.js and angular-google-maps.js in the <head> of your project or view.

3. Configure Library Options

For the next step, it is not clear if including the following script is also requried:

That depends. I don’t recommend it. Instead, adding the following config block to your module will prevent the need to do include the script above.

Note that and API key is optional for testing. You can make up to 2500 requests per day and 5 requests per second based on your IP address. You also will most likely only need the ‘geometry’ library for basic map usage.

Also note that the above code includes the uiGmapgoogle-maps dependency for the module that requires it.

4. Create $scope.map Object

Somewhere in your controller you will need a $scope.map object. It will need to look something like this:

You will most likely want a map marker as well, so you will need $scope.marker. It will need to look something like this:

The Google Maps directive will specifically look for $scope.map and $scope.marker, so don’t be clever and rename them something else.

Since we want to supply a street address, we will have to come back and change this later. However it sets up the next step for our example so you can at least get a map on your view.

5. Google Maps Directive

In the view where you want to display your map, place the map and marker directives:

6. Add Google Maps CSS

This step is actually required. You must set some sort of height to your Google Maps or else it will not be visible on the page.

Note that it will NOT work if you try to set the style attribute of the <ui-gmap-google-map> directive. So this will not work:

The map will still collapse and not be visible.

7. Geocode Street Address

Since we are getting an address we need to pass it to the Google Geocoding API. To do that, let’s add a factory rather than cluttering up our controller.

8. Update the controller

Now that our factory allows us to return properly formatted $scope.map object, we are going to change our controller.

Submit a Comment

Your email address will not be published. Required fields are marked *