ng-clustered-map
Add google maps with clustered markers in your Angular apps with a single line of code!
Demo
See it live here: http://arnauddri.github.io/ng-clustered-map/
Install
Via npm
npm install --save ng-clustered-map
Via bower
bower install --save ng-clustered-map
Usage
Include Google maps dependencies:
Inject clustered.map
in your module:
angular
Declare the directive as an element an pass it your arguments:
Attributes
markers: Pass the an array of markers to add on the map:
$scopemarkers= latitude longitude weight ...
To add custom pop-ups to a pin, just add a 4th element to the pin's array with its inner HTML
$scopemarkers= 10 10 3 '<h1>foobar</h1>' ...
To use custom markers, just add a 5th element to the pin's array with the path to your icon. Note that if you use a custom marker but no pop-up the 4th element needs to be null:
$scopemarkers= 10 10 3 '<h1>foobar</h1>' 'http://path/to/my/first/icon' 10 10 3 null 'http://path/to/my/second/icon'...
zoom: Defines the initial zooming on the map (default: 2)
center: Defines the initial center of the map (default: barycenter of the passed coordinates)
$scopecenter = x: 0 y: 0