In this post I would like to start adding some mapping functionality to our application. As always, there are a lot of different ways to achieve this goal, but I have chosen to go with Google Maps as the mapping solution provider, because of their clean and simple API, the visualization layers, and frankly – because I have used it in the past and know it a little bit. Even with that decided – there still a lot of ways to incorporate the Google Map in our application. Let’s try an Angular add-on that will add Google Maps directives to Angular. It is called Google Maps for AngularJS, and before we can use it, let’s install another package and dependency manager that will ease the add-on installation – Bower. You can install it yourself by placing the add-on JS in your js sub folder, but you will need to install some dependencies as well (lodash in this case). Bower packages will be placed under the “bower_components” sub folder.
> npm install -g bower ... > bower install angular-google-maps
After the packages are installed, you can reference them directly from the install folders: