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'
- include ng-map.js or ng-map.min.js and ngMap module to be active.
<script src="http://maps.google.com/maps/api/js?sensor=false"></script> <script src="http://code.angularjs.org/1.2.5/angular.js"></script> <script src="http://rawgithub.com/allenhwkim/angularjs-google-maps/master/dist/ng-map.min.js"></script>
-
name angular app as ngMap, or add it as a dependency
<html ng-app="ngMap"> -
use
maptag, and optionally,marker, andshapetags<map style="display:block;height:300px" />
- Hello Map
- Markers
- [Dynamic Markers] (https://rawgithub.com/allenhwkim/angularjs-google-maps/master/examples/dynamic_markers.html)
- My Address
- Where am I?
- Controls
- Map Options
- Shapes(Rectangle, Triangle, Image)
- Events
- Bird Eyes View/Street View
- Multiple Maps On A Page
- Index of Examples
To use it in your app, please include 'ngMap' as dependency.
var myApp = angular.module('myApp', ['ngMap']);
<html ng-app="myApp">
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
There are three directives defined with ng-map module.
- map
- marker
- shape
As documented, it requires minimum two options, center and zoom. You can specify all map options as attributes.
These are attributes of map tag which is EXACTLY the same as the documentation.
| 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.
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 which ate EXACTLY the same as the documentation.
| 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 always requires name attribute
-
name (the name of shape)
i.e.polygon,image,polyline, orcircle. -
optionally, you can provide
idfor 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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent