Skip to content

Riccardo-Andreatta/angular-google-map

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Update (2017)

Custom fork of this project to fix the directive name and add Google Marker icons to map

Angular Google Map

An angular directive to display a custom google map

Installation

Via NPM

$ npm install --save angular-google-map-v2

or the simple way, by including /dist/angular-google-map-v2.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-v2'])
    .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-map
    lat="51.507351"
    lng="-0.127758"
    apikey="YOUR-API-KEY-HERE"
</google-map>

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-map></google-map>

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

About

An angular directive to display a custom google map

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 65.3%
  • HTML 34.7%