angularjs-google-maps

The Simplest AngularJS Google Maps V3 Directive
8 people use it
Author: 1437734?v=3 allenhwkim

GoogleMap AngularJS Directive

Build Status

NOTE: 1.1.0 is released. * marker directive can have icon attribute as JSON * map with init-event attribute for initialization by an event

NOTE: 1.0.0 is released.
Now, it covers all official google examples using new directives. The new directives are;

  • Layer Directives
    traffic-layer, transit-layer, weather-layer, bicycling-layer, cloud-layer, dynamic-maps-engine-layer, fusion-tables-layer, heatmap-layer, kml-layer, maps-engine-layer custom-control
  • info-window
  • map-data
  • map-type
  • overlay-map-type

Demo
Documentation

There is already one for this. However, I found myself doing totally different approach for this purpose than the existing one, such as;

  1. Everything in tag and attributes.
    Thus, basic users don't even have to know what Javascript is.
  2. Expose all original Google Maps V3 api to the user.
    No hiding, no wraping, or whatsoever. By doing so, programmers don't need to learn how to use this module. You only need to know Google Maps V3 API.

There is a blog that introduces this module. The title of it is 'Google Map As The Simplest Way'

To Get Started

For Bower users,

$ bower install ngmap

  1. Include ng-map.min.js as well as google maps.
    <script src="http://maps.google.com/maps/api/js"></script>
    <script src="http://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.min.js"></script>

  2. name angular app as ngMap, or add it as a dependency

    var myApp = angular.module('myApp', ['ngMap']);

After map is initialized, you will have one event and map instances

Event:

  • mapInitialized with parameter with map

    In case your map directive scope is different from your controller scope, use this event to get the map instance.

    app.controller('parentParentController', function($scope) { $scope.$on('mapInitialized', function(event, map) { map.setCenter( .... ) .. }); });

Instances:

  • $scope.map
  • $scope.map.markers
  • $scope.map.shapes
  • etc

Directives

<map>

<marker>

<shape>

<info-window>

<custom-control>

<map-data>

Layer Directives

<bicycling-layer>

<weather-layer .. > (deprecated) and <cloud-layer .. > (deprecated)

<fusion-tables-layer>

<heatmap-layer>

<maps-engine-layer>

<traffic-layer>

<transit-layer>

<dynamic-maps-engine-layer>

<kml-layer>

MapType Directives

<map-type>

<overlay-map-type .. >

Advanced Examples

license

MIT License

comments powered by Disqus
This page was last updated about 3 years ago.