Angular directive

map source template


Implementation of MapController Initialize a Google map within a <div> tag with given options and register events It accepts children directives; marker, shape, or marker-clusterer

It initialize map, children tags, then emits message as soon as the action is done The message emitted from this directive is; . mapInitialized


Attr2Options service

Converts html attributes to Google map options

$timeout service

Angular window.setTimeout wrapper

$parse service

Angular html parser


geo-callback Expression

If center is an address or current location, the expression is will be executed when geo-lookup is successful. e.g., geo-callback="showMyStoreInfo()"

geo-fallback-center Array

The center of map incase geolocation failed. i.e. [0,0]

zoom-to-include-markers Boolean

If true, map boundary will be changed automatially to include all markers when initialized

default-style Boolean

When false, the default styling, display:block;height:300px, will be ignored.

init-event String

The name of event to initialize this map. If this option is given, the map won't be initialized until the event is received. To invoke the event, use $scope.$emit or $scope.$broacast. i.e. <map init-event="init-map" ng-click="$emit('init-map')" center=... ></map>

<MapOption> String

Any Google map options

<MapEvent> String

Any Google map events


    ... Any children directives
  <map center="[40.74, -74.18]" on-click="doThat()">
  <map geo-fallback-center="[40.74, -74.18]" zoom-to-inlude-markers="true">


linkFunc (scope, element, attrs, ctrl)

Initialize map and events


scope service

the scope of this element

element service

element that this direcive is assigned to

attrs service

attribute of this element

ctrl MapController

map controller