https://github.com/stavinski/angular-geo-maplocation
An angular directive for marking a geo-location on a map
https://github.com/stavinski/angular-geo-maplocation
Last synced: 3 months ago
JSON representation
An angular directive for marking a geo-location on a map
- Host: GitHub
- URL: https://github.com/stavinski/angular-geo-maplocation
- Owner: stavinski
- License: mit
- Created: 2014-05-09T18:49:43.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2014-05-17T19:53:59.000Z (about 11 years ago)
- Last Synced: 2025-02-11T17:16:39.578Z (4 months ago)
- Language: JavaScript
- Size: 163 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# angular-geo-maplocation
[example app](http://stavinski.github.io/angular-map/)
## Getting Started
Install [bower](http://bower.io/) if you don't already have it installed then run the following from the command line:
```
bower install angular-geo-maplocation
```
This will add the necessary js files to your bower components directory (usually bower_components), if you already have a build script in place that automatically references bower packages then you can skip to the module declaration otherwise you can add the following underneath your angular script element:
```html
```
In your module declaration:
```js
angular.module('mymodule', ['angular-geo-maplocation']);
```
Once this is in place you will need to follow add a reference to underscore (used by angular-google-maps) and google maps:
```html
```
*The underscore reference may be already brought in via your build script*
## Documentation
This directive is built on top of the fantastic [angular-google-maps](http://angular-google-maps.org/) library I had a use case were I just wanted to have a map with a single marker representing a geo location that could be moved around a map to enable them to set lat & lon without having to type them in manually, hence this directive was born for this use case.
The directive uses isolated scope to prevent it from polluting the parent scope but supports 2 way binding through the coords attribute, this means that the parent can supply the coords through any means such as a postcode query.
## Examples
In controller:
```javascript
$scope.location = {
latitude: 51.5033630,
longitude: -0.1276250
};
```
In template:
```html
```
## Attributes
### coords
**Required**
```javascript
{
latitude: 51.5033630,
longitude: -0.1276250
}
```
Specifies the expression that will be bound to the marker, this is 2 way bounded to allow changes to be reflected in either direction
### start
**required**
```javascript
{
latitude: 51.5033630,
longitude: -0.1276250
}
```
Specified the expression that will be where the map is centered and is used when first displaying the map.
### zoom
**optional**
Is a numeric value to control at what the level the map is zoomed in at, between 1 and 20.
### tooltip
**optional**
This is the content that will be displayed when the mouse is hovered over the marker