angularjs-google-maps

The Simplest AngularJS Google Maps V3 Directive

Homepage

Module License: MIT

Added by: Sam Deering

GitHub

Repository

allenhwkim/angularjs-google-maps

Stats

Stars: 1292

Watchers: 1292

Forks: 449

Author

Allen Kim
Allen Kim

Module Description

GoogleMap AngularJS Directive

Build Status

Demo
Documentation
Road Trip By StreetView

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

Lazy Loading

Simply wrap the map tag with map-lazy-load="http://maps.google.com/maps/api/js".

<div map-lazy-load="http://maps.google.com/maps/api/js">
  <map center="41,-87" zoom="3"></map>
</div>

Release Notes

1.7.0

  • added directions directive Example
  • added places-auto-complete for input tag. Example

1.6.0

1.5.0

  • added geo-callback attribute for map, marker, shape, and info-window. Example

1.4.0

  • support lazy loading of maps js with directive, map-lazy-load, which does not require to https://maps.google.com/maps/api/js Example

1.3.0

  • added drawing-manager directive. Thanks to Fangming Du Example

1.2.0

  • events with controller as syntax, thanks to Simon

1.1.0

  • marker directive can have icon attribute as JSON
  • map with init-event attribute for initialization by an event

1.0.0 (covers all official google examples using directives).

  • marker

  • shapes

    • circle
    • polyline
    • polygon
    • rectangle
    • image
  • layers

    • traffic-layer
    • transit-layer
    • bicycling-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

Directives

<map .. >

As defined on MapOptions, you can add any attributes, and events starting witn on-. Please note that event value must be a function.

Example:

<map zoom="11" 
  center="[40.74, -74.18]" 
  disable-default-u-i="true"
  disable-double-click-zoom="true"
  draggable="false"
  draggable-cursor="help"
  dragging-cursor="move"
  keyboard-shortcuts="false"
  max-zoom="12"
  min-zoom="8"
  tilt="45"
  map-type-id="TERRAIN">
</map>

i.e. < zoom="11" center="[40.74, -74.18]"

<marker .. >

As defined on MarkerOptions, you can add any attributes, and events starting witn on-.

<map center="[40.74, -74.18]">
  <marker
      position="[40.76, -74.16]"
      title="Hello Marker"
      animation="Animation.BOUNCE"
      draggable="true"
      visible="true"
      icon="beachflag.png"></marker>
</map>

<shape .. >

Polyline, Circle, Polygon, Rectangle, and Images

 <map zoom="11" center="[40.74, -74.18]">
    <shape id="polyline" name="polyline" 
      geodesic="true" stroke-color="#FF0000" stroke-opacity="1.0" stroke-weight="2"
      path="[[40.74,-74.18],[40.64,-74.10],[40.54,-74.05],[40.44,-74]]" ></shape>
    <shape id="polygon" name="polygon" 
      stroke-color="#FF0000" stroke-opacity="1.0" stroke-weight="2"
      paths="[[40.74,-74.18],[40.64,-74.18],[40.84,-74.08],[40.74,-74.18]]" ></shape>
    <shape id="rectangle" name="rectangle" stroke-color='#FF0000' 
      stroke-opacity="0.8" stroke-weight="2"
      bounds="[[40.74,-74.18], [40.78,-74.14]]" editable="true" ></shape>
    <shape id="circle" name="circle" stroke-color='#FF0000'
      stroke-opacity="0.8"stroke-weight="2" 
      center="[40.70,-74.14]" radius="4000" editable="true" ></shape>
    <shape id="image" name="image" 
      url="https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg"
      bounds="[[40.71,-74.22],[40.77,-74.12]]" opacity="0.7" clickable="true" ></shape>
 </map>

<info-window .. >

Example:

<map center="-25.363882,131.044922" zoom="4">
  <info-window id="bar" position="-25.363882,131.044922" visible="true">
    <div ng-non-bindable>
      <div id="siteNotice"></div>
    </div>
  </info-window>
</map>

<custom-control .. >

Example:

  <map center="41.850033, -87.6500523" zoom="6">
    <custom-control id="home" position="TOP_RIGHT" index="1" on-click="click()">
      <div style="background-color: black; color:#fff;cursor:pointer">Home1</div>
    </custom-control>
  </map>

<map-data .. >

Example:

  <map zoom="4" center="-28, 137.883">
    <map-data 
      load-geo-json="https://storage.googleapis.com/maps-devrel/google.json"></map-data>
  </map>

Layer Directives

<bicycling-layer .. >

  <map zoom="14" center="42.3726399, -71.1096528">
    <bicycling-layer></bicycling-layer>
  </map>

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

  <map zoom="6" center="49.265984,-123.127491">
    <weather-layer temperature-units="FAHRENHEIT"></weather-layer>
    <cloud-layer></cloud-layer>
  </map>

<fusion-tables-layer .. >

  <map zoom="11" center="41.850033, -87.6500523">
    <fusion-tables-layer query="{
      select: 'Geocodable address',
      from: '1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg'}">
    </fusion-tables-layer>
  </map>

<heatmap-layer .. >

  <map zoom="13" center="37.774546, -122.433523" map-type-id="SATELLITE">
    <heatmap-layer id="foo" data="taxiData"></heatmap>
  </map>

<maps-engine-layer .. >

  <map center="59.322506, 18.010025" zoom="14">
    <maps-engine-layer
      layer-id="06673056454046135537-08896501997766553811">
    </maps-engine-layer>
  </map>

<traffic-layer>

  <map zoom="13" center="34.04924594193164, -118.24104309082031">
    <traffic-layer></traffic-layer>
  </map>

<transit-layer>

  <map zoom="13" center="51.501904,-0.115871">
    <transit-layer></transit-layer>
  </map>

<dynamic-maps-engine-layer .. >

  <map center="59.322506, 18.010025" zoom="14">
    <dynamic-maps-engine-layer
      suppress-info-windows="true"
      clickable="true"
      on-mouseover="onMouseover()"
      on-mouseout="onMouseout()"
      layer-id="06673056454046135537-08896501997766553811">
    </dynamic-maps-engine-layer>
  </map>

<kml-layer .. >

  <map zoom="11" center="41.875696,-87.624207">
    <kml-layer url="http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml"></kml-layer>
  </map>

MapType Directives

<map-type .. >

  <map zoom="10" center="41.850033,-87.6500523"
    <map-type name="coordinate" object="CoordMapType">
    </map-type>
  </map>

<overlay-map-type .. >

  <map zoom="10" center="41.850033,-87.6500523">
    <overlay-map-type object="CoordMapType" index="0">
    </overlay-map-type>
  </map>

Advanced Examples

Contributors

285  Allen Kim
 13  Hamza Azeem
  4  Fangming Du
  3  Antonio Salumbides
  2  Alexandre Kilian
  2  Prem Prakash
  2  Romain Maneschi
  2  jpagand
  1  martinmicunda
  1  Simon Hampton
  1  Will
  1  Ishaan Puniani
  1  Michael Liu
  1  unknown

license

MIT License

Module stats last updated: 2017-02-16 15:00:03

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!