Angular Google Map

An angular directive to display a custom google map

Installation

Via NPM

$ npm install --save angular-google-map

or the simple way, by including /dist/angular-google-map.min.js into the head of your HTML.

Usage

Follow these steps to get it working in your project. In src you can see a working example of the module and play around with it. Alternatively, just follow these steps.

Adding to your Angular project

You can add the module as a dependency after declaring your own module, like so:

angular
    .module('myApp', ['angular-google-map'])
    .config(config)
    .run(run);

The directive is now available to your app and can be used in your HTML.

HTML

To include the directive, use the following markup:

<google-maps
    lat="51.507351"
    lng="-0.127758"
    apikey="YOUR-API-KEY-HERE"
</google-maps>

Options

The Angular Google Maps directive works supports the majority of the style attributes that the native API supports. The only required properties are lat, long and zoom the others are optional. The following is a list of the supported attributes, which can all be added as attributes to the <google-maps></google-maps>

Attribute	Type	Required	Default	Description
apikey	String	True	NONE	Your Google maps API Key. You can obtain one easily from the website
lat	Float	True	NONE	Latitude position for map
long	Float	True	NONE	Longitude position for map
clickable-icons	Boolean	Optional	True	Locations with more information are clickable
custom-css	String	Optional	"height:400px;"	Pass a CSS class to control the height, width and position of the map. Not setting a class will default the map to 400px high and 100% wide.
custom-map-name	String	Optional	N/A	If you pass in a custom map styling array, you can name it and make it selectable from from map styles control
custom-map-styles	Array	Optional	Default	A custom map skin, see http://www.snazzymaps.com for examples
disable-default-ui	Boolean	Optional	False	Hide all controllable UI elements
disable-double-click-zoom	Boolean	Optional	True	Double clicking zooms in closer
draggable	Boolean	Optional	True	Sets wether the map can be moved by user dragging action
fullscreen-control	Boolean	Optional	False	Display a control to fullscreen the map
fullscreen-control-options	Boolean	Optional	'TOP_LEFT'	Position controls for the fullscreen map
map-type	String	Optional	'ROADMAP'	Choices are: 'ROADMAP','SATELLITE','HYBRID'
map-type-control	Boolean	Optional	True	Display the Map Type options buttons
map-type-control-options-style	String	Optional	'HORIZONTAL_BAR'	Style for the buttons. Choices are: 'HORIZONTAL_BAR' or 'DROPDOWN_MENU'
map-type-control-options-position	String	Optional	'TOP_LEFT'	Position of the buttons. Choices. See Full API for details
scrollwheel	Boolean	Optional	True	If False, use scrolling within the map will not effect zoom level.
street-view-control	Boolean	Optional	True	Display the Street View option
street-view-control-options	Boolean	Optional	'RIGHT_BOTTOM'	See Full API for details
zoom	Int	Optional	8	Default zoom level for map, the higher the number the closer the zoom
zoom-control	Boolean	Optional	True	Display the zoom control
zoom-control-options	Boolean	Optional	'BOTTOM_RIGHT'	See Full API for details

Support

This module has been developed to support versions of Angular from 1.2.2 up to 1.4.5 - If IE8 support is required please make sure to use Angular 1.2.

Browser Support

This module has been developed to support all modern browsers will providing legacy support for IE8 and up.

Development

If you wish to contribute or amend the source files and recompile you can do so by running the local development tasks.

You will need to install the dependencies by running npm install then run the default gulp task by running gulp. This will create a local server and run the uncompiled version of the assets. The files are then visible at: http://localhost:8001

Unit tests are still to be added.

Roadmap

• Unit tests