In the accompanying tutorial, you will learn how to create mapify app using angularjs , we’ll also see how to install a directive into an angularjs application using the Bower dependency manager.

Here we’ll use the ng-map directive. As the name says, it is a directive for creating and manipulating maps. You can find more information on ng-map at

Getting prepared

We will utilize the same code that we utilized as a part of the past case as a beginning stage. What’s more, it is suggested that you as of now have Bower introduced on your framework. On the off chance that you don’t have or know Bower, don’t stress, we will exhibit how to introduce it physically.

  • At the root project folder, open your terminal window and type:
    bower install ngmap --save
  • To get the directive to work properly, you need to add the Google Maps script. In this example, we will use the code directly from the Google CDN through this link: //
  • Open the index.html file and add the following script tag right after the mappingService.js script:
    <script src="//"></script>
  • Add the ng-map script right after the Google Maps script:
    <script src="src/bower_components/ngmap/build/scripts/ng-map.min.js"></script>