NgMaps The Easiest Way To Use Map In Our Angular Applications
Posted By : Sachin Arora | 16-Dec-2017
Ng-Map is a google maps directive for angular js, it makes easy to write data intensive google map applications.This allows us to build our map using custom html tags,which makes structuring and scaling of our application easy.
Technical Features
- 12 directives for the most used Google Maps objects
- Load as many .geojson files as you want on the same map. Google Maps data layer only allows for one file.
- Create custom controls and infowindows in raw HTML with whatever behavior you'd like.
- Two way data binding for Google Map objects. Changes to markers and editable rectangles update your model accordingly.
How To Install
To install with bower you just need to run a command .
bower install ng-maps
Quick-Start
All you need to get started with ng-maps ,angularJS and google maps is you firstly need to add all three into your html.
<script src='//maps.googleapis.com/maps/api/js'></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
<script src="bower_components/ng-maps/dist/ng-maps.js"></script>
Now,include ng-maps in your angularJs app
var app = angular.module('App', ['ngMaps'])
Now to use the basic map add it anywhere in your html file
<map ng-transclude class="short-map"> </map>
Now you are all set to use the map , you can add height ,width and even style your map as per the requiement of your application.Ng-map provides way many more html directives for different features of maps like auto-rotate,traffic,markers,custom markers.
So Ng-map is one of the easiest and best way to include google maps in your angularJs applications.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Sachin Arora
Sachin is ambitious and hardworking individual with broad skills,He have the capabilities to build captivating UI applications . One of his key strength is building a strong bond with the team in order to deliver the best results on time .