Showing posts with label maps. Show all posts
Showing posts with label maps. Show all posts


July 23, 2017
The Simplest AngularJS Google Maps V3 Directive Check out Demo
If you like this, you also may like these;


There is already one for this. However, I found myself doing totally different approach than the existing one, such as;
  1. Everything in tag and attributes.
    Thus, basic users don't even have to know what Javascript is.
  2. Expose all original Google Maps V3 api to the user.
    No hiding, no wraping, or whatsoever. By doing so, programmers don't need to learn how to use this module. You only need to know Google Maps V3 API.
There is a blog that introduces this module. The title of it is 'Google Map As The Simplest Way'

Get Started

For Bower users,
 $ bower install ngmap  
  1. Include ng-map.min.js:
     <script src="/bower_components/ngmap/build/scripts/ng-map.min.js"></script>  
  2. Include Google maps:
     <script src=""></script>  
  3. Name your angular app ngMap, or add it as a dependency
     var myApp = angular.module('myApp', ['ngMap']);  
To get the map instance use the NgMap.getMap() function
 app.controller('MyController', function(NgMap) {  
  NgMap.getMap().then(function(map) {  
   console.log('markers', map.markers);  
   console.log('shapes', map.shapes);  
For npm users,
 $ npm install ngmap  
For meteor users:

Lazy Loading of Google Maps Javascript

Simply wrap the map tag with map-lazy-load="".
 <div map-lazy-load="">  
  <ng-map center="41,-87" zoom="3"></ng-map>  
If you need to pass in an API key to the javascript, you can set a scope variable in your controller (e.g. $scope.googleMapsUrl="";). This can be set from a constant value in your app to standardise the API key to pass to google for multiple controllers.
 <div map-lazy-load=""  
  <ng-map center="41,-87" zoom="3"></ng-map>  


Grey area in Google maps

The usual reason why this is happening is that the size of the map is changed after the map has been initialized. If you for some reason change the size of the div, you need to trigger the "resize" event and possible reCenter the map.
  var center = map.getCenter();  
  google.maps.event.trigger(map, "resize");  


Check if a marker is within Map, Rectangle, or Circle


Calculate distance between two position

You may checkout this, As you see, DistanceMatrix does not require map nor directive.
Another way to do is to use directions directive. As you see it here,, you have access to DirectionsRenderer by using map.directionsRenderers[id]
You use getDirections() or directions, then calculate the distance from there. e.g.,
Distance: {{map.directionsRenderers[0].directions.routes[0].legs[0].distance}}


  • bicycling-layer
  • custom-control
  • custom-marker (NEW)
  • directions (NEW)
  • drawing-manager (NEW)
  • dynamic-maps-engine-layer
  • fusion-tables-layer
  • heatmap-layer
  • info-window
  • kml-layer
  • map
  • map-data
  • map-lazy-load (NEW)
  • map-type
  • map_controller
  • maps-engine-layer
  • marker
  • overlay-map-type
  • places-auto-complete
  • shape
  • street-view-panorama (NEW)
  • traffic-layer
  • transit-layer

Advanced Examples

Note: Special thanks to Allen Kim


Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.
AngularJS directive to embed and interact with maps managed by Leaflet library

AngularJS directive to embed and interact with maps managed by Leaflet library

May 14, 2017

Angular Leaflet Directive

AngularJS directive for the Leaflet Javascript Library. This software aims to easily embed maps managed by Leaflet on your project.

AngularJS directive to embed an interact with maps managed by Leaflet library


This is a personal project, which has been coded by me helped by many people for some years. I'm evolving it frequently, actually I'm making the code transition to Leaflet 1.0 and Angular 2. If you need enterprise for older versions, sorry, I can't give you more support that my spare time allows me. If you want to help with the actual code it would be really appreciated, but first of all, please, read the CONTRIBUTING documentation


If you need better response time with your doubts and needs with the code of version 0.9.0, take a look at the angular-ui fork of this project, it's lead by really awesome developers which have helped me evolving the project for some time.


Browse all the examples added by the community to learn about the directive and its possibilities.


Still working on it. In the meantime, take a look at this URL for some minimal descriptions:

Getting started/How to use it

Include the leaflet-directive dependency on your Angular module:
 var app = angular.module('demoapp', ['leaflet-directive']);  
After that, you are ready to rock. Just define some objects with the basic configuration you want reflected in your map and the rendered map will obey you. Also, you can modify that configuration dinamically if you need to. Let's see an example.


If you want to set the map view to a precise position, you can define the "center" property of the scope (lat, lng, zoom). It will also be updated interacting on the scope and on the leaflet map in two-way binding. Example:
 angular.extend($scope, {  
   center: {  
     lat: 51.505,  
     lng: -0.09,  
     zoom: 8  
Finally, you must include the markup directive on your HTML page. One important thing is that you must define the map width&height, as attributes of the directive or with CSS code, as you wish.
 <leaflet lf-center="center" height="480px" width="640px"></leaflet>  
If you want to have more than one map on the page and access their respective map objects, add an *id* attribute to your leaflet directive in HTML:
 <leaflet id="mymap" lf-center="center" height="480px" width="640px"></leaflet>  
Note: Special thanks to David Rubert