Angular Google Maps Native: Add AngularJS directives to render GoogleMaps

Recommend this page to a friend!
     
  Info   Example   View files Files   Download Download   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not yet rated by the usersTotal: 124 All time: 381 This week: 1Up
Version License JavaScript version Categories
angular-google-maps- 1.3.5GNU General Publi...1.0Geography, Web services
Description 

Author

This package can add AngularJS directives to render GoogleMaps.

It defines new AngularJS module that enables tags to place GoogleMaps in AngularJS templates.

The module enables the definitions of maps, addresses, overlays, markers, circles, rectangles, InfoWindows, polylines, directions, traffic layers, etc..

Picture of Jean-Baptiste DEMONTE
Name: Jean-Baptiste DEMONTE <contact>
Classes: 2 packages by
Country: France France
Age: 44
All time rank: 211 in France France
Week rank: 6 Up2 in France France Down

Example

<!DOCTYPE html> <html ng-app="MyApp"> <head lang="en"> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="assets/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <script src="../dist/angular-google-maps-native.min.js"></script> <script src="assets/tools.js"></script> <script> angular.module('MyApp', ['GoogleMapsNative', 'ExampleTools']) .config(function(gmLibraryProvider) { gmLibraryProvider.configure({ language: 'fr' }); }) .controller('MyCtrl', function ($scope, console) { $scope.console = console; }) ; </script> </head> <body ng-controller="MyCtrl" ng-init="zoom=4; showMap=false;"> <div class="panel"> <div class="item"> <label> <input type="checkbox" ng-model="showMap"> Show the map </label> </div> <div class="item" ng-show="showMap"> Zoom: <select ng-model="zoom" ng-options="o as o for o in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]"></select> </div> <div class="item" ng-show="showMap"> mapTypeID: <select ng-model="data.mapTypeID" ng-options="o as o for o in [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.TERRAIN]" required ></select> </div> <div class="item" ng-show="showMap"> GoTo: <button ng-click="center=[48.85341, 2.3488]; zoom=5">Paris</button> <button ng-click="center=[48, -74]; zoom=5">Quebec</button> </div> </div> <gm-map ng-show="showMap" mapTypeID="data.mapTypeID" center="center" zoom="zoom" options="{center: [37.772323, -122.214897], mapTypeId: google.maps.MapTypeId.ROADMAP}" on-zoom-changed="console.log('zoom_changed: ' + map.getZoom())" on-click="console.log('click on {' + event.latLng.lat() + ',' + event.latLng.lng() + '}')" once-drag="console.log('drag once <em>unbind drag event</em>')" > </gm-map> <console></console> </body> </html>

  Files folder image Files (27)  
File Role Description
Files folder imageassets (1 file)
Files folder imagedist (2 files)
Files folder imageexamples (18 files, 1 directory)
Files folder imagetests (1 directory)
Accessible without login Plain text file bower.json Data Auxiliary data
Accessible without login Plain text file package.json Data Auxiliary data
Accessible without login Plain text file README.md Data Auxiliary data

  Files folder image Files (27)  /  assets  
File Role Description
  Accessible without login Image file screenshot.png Data Auxiliary data

  Files folder image Files (27)  /  dist  
File Role Description
  Plain text file angular-google-maps-native.js Class Class source
  Plain text file angular-google-maps-native.min.js Class Class source

  Files folder image Files (27)  /  examples  
File Role Description
Files folder imageassets (2 files)
  Accessible without login Plain text file address.html Example Documentation
  Accessible without login Plain text file bicyclinglayer.html Example Documentation
  Accessible without login Plain text file circle.html Example Documentation
  Accessible without login Plain text file directions.html Example Documentation
  Accessible without login Plain text file groundoverlay.html Example Documentation
  Accessible without login Plain text file infowindow.html Example Documentation
  Accessible without login Plain text file kmllayer.html Example Documentation
  Accessible without login Plain text file map.html Example Documentation
  Accessible without login Plain text file marker.html Example Documentation
  Accessible without login Plain text file markers.html Example Documentation
  Accessible without login HTML file place.html Doc. Documentation
  Accessible without login Plain text file polygon.html Example Documentation
  Accessible without login Plain text file polyline.html Example Documentation
  Accessible without login Plain text file rectangle.html Example Documentation
  Accessible without login Plain text file streetviewpanorama.html Example Documentation
  Accessible without login HTML file styledmaptype.html Doc. Documentation
  Accessible without login Plain text file trafficlayer.html Example Documentation
  Accessible without login Plain text file transitLayer.html Example Documentation

  Files folder image Files (27)  /  examples  /  assets  
File Role Description
  Accessible without login Plain text file style.css Data Auxiliary data
  Accessible without login Plain text file tools.js Example Example script

  Files folder image Files (27)  /  tests  
File Role Description
Files folder imagetests (1 file)

  Files folder image Files (27)  /  tests  /  tests  
File Role Description
  Accessible without login Plain text file styledmaptype.js Aux. Auxiliary script

 Version Control Unique User Downloads Download Rankings  
 100%
Total:124
This week:0
All time:381
This week:1Up