xxxazxxx/angularjs-google-maps

Google maps v3 angularjs directive module

JavaScriptMIT

GoogleMap AngularJS Directive

There is already one for this. However, I found myself doing totally different approach for this purpose than the existing one, such as;

Everything in tag and attributes
Therefore, basic users does not even have to know what Javascript is. Tag does it all.
Expose the original Google Maps V3 api
By doing so, programmers don't need to learn this module.

There is a blog that introduces this module.
The title of it is 'Google Map As The Simplest Way'

To Get Started

include ng-map.js or ng-map.min.js and ngMap module to be active. <script src="https://rawgithub.com/allenhwkim/angularjs-google-maps/master/dist/ng-map.min.js"></script>

<html ng-app="ngMap">

use map tag, and optionally, marker, and shape tags

<map style="display:block;height:300px" />

Examples

To use it in your app, please include 'ngMap' as dependency to your app.

var myApp = angular.module('myApp', ['ngMap']);

You will also have these three scope variables after these directives are initialized.

* $scope.map
* $scope.markers as a hash
* $scope.shapes as a hash

Directives

There are three directives defined with ng-map module.

map
marker
shape

map Tag(Directive)

As documented, it requires minimum two options, center and zoom. You can specify all map options as attributes.

These are attributes of map tag

Attributes	Description
background-color	i.e. 'yellow', 'red'
center	address or latitude/langitude i.e. center="[40.79,-54,18]", center="toronto, canada"
disable-default-u-i	true or false
disable-double-click-zoom	true of false
draggable	true of false
draggable-cursor	i.e. pointer
dragging-cursor	i.e. hand
heading	The heading for aerial imagery in degrees measured clockwise from cardinal direction North. Headings are snapped to the nearest available angle for which imagery is available.
keyboard-shortcuts	true or false
map-maker	true or false
map-type-id	i.e. mapTypeId="HYBRID"
max-zoom	number, i.e. 12, 13
min-zoom	numer, i.e. 4, 5
no-clear	true or false
scrollwheel	true or false
street-view	i.e. streetView="StreetViewPanorama($("#pano")[0], {position:fenway, pov:{heading: 34, pitch: 10}})"
styles	i.e. styles='{featureType: "poi"}'
zoom	initial map zoom level, required. i.e. 12
EVENTS	You can also specify any href="https://developers.google.com/maps/documentation/javascript/reference#Map">map events as an attribute. i.e. on-click="myfunc"

These are full list of controls that can be used as map attributes;

For usage of map controls, please refer to this example.

marker Tag(Directive)

As documented, it reqires position as an attribute. You can list any maker options as attribute of marker tag

These are attributes of marker tag

Attribute	Description
id	Used for programming purpose. i.e. $scope.markers.myId
anchor-point	i.e. Point(x:number, y:number)
animation	i.e. Animation.Bounce, Animation.Drop
clickable	true or false
cross-on-drag	true or false
cursor	Mouse cursor to show on hover
draggable	true or false
flat	not to show shadow, true or false
icon	icon for the foreground
optimized	true or false, to show markers as canvas tag or not
position	'current', address, or latitude/longitude i.e. 'current location', 'current position', 'Toronto, Canada', or [40.74, -74.18]
raise-on-drag	true or false
shadow	shadow image
shape	Image map region definition used for drag/click.
title	hover text
visible	true or false
zIndex	number
EVENTS	You can also specify any [marker events](https://developers.google.com/maps/documentation/javascript/reference#Marker) as an attribute. i.e. on-click="myfunc"

shape Tag(Directive)

shape tag always requires name attribute

name (the name of shape)
i.e. polygon, image, polyline, or circle.
optionally, you can provide id for programming purpose. i.e. $scope.shapes.myCircle

All other attributes are based on the name you specified.
To see the full list of options of a shape for attributes, please visit the documentation.

license