angular-google-maps-native

• API
• Provider
  • gmLibraryProvider
• Directives
  • Main
    • map
    • streetViewPanorama
  • Attributes
    • address
    • then
  • Overlays
    • circle
    • groundOverlay
    • infowindow
    • marker
    • polygon
    • polyline
    • rectangle
    • renderer
    • styledMapType
  • Layers
    • bicyclingLayer
    • kmlLayer
    • trafficLayer
    • transitLayer
  • Services
    • directions

Directives

Instanciation

Basically, directives intend to create a google.maps object or to use a google service (e.g. directions).
Each time, directives accept an options attribute which depends on google object or service.
Since version 2, options is binded. LatLng and LatLngBounds are casted to google object.

Scope

Once the google maps library is loaded, the google object is set into the $rootScope, so, it can be used in the attributes as below:

<gm-map options="{center: [37, -122], zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP}"></gm-map>

Each directive uses a child scope which provides its own google maps native object.
e.g. In the HTML structure:

• gm-map: provides map
  • gm-marker: provides marker (and see map)
    • gm-infowindow: provides infowindow (and see map and marker)
  • gm-circle: provides circle (and see map)

Events

All events are directly usable in the directive with the prefix on (addListener) or once (addListenerOnce).
They use a not isolated child scope, which provides an event object, that depends on the event type (see google documentation).

  <gm-map
    options="{center: [37, -122], zoom:8, mapTypeId: google.maps.MapTypeId.ROADMAP}"
    on-zoom-changed="log('zoom_changed: ' + map.getZoom())"
    on-click="log('click: {' + event.latLng.lat() + ',' + event.latLng.lng() + '}')"
    once-drag="log('drag once')"
  >
  </gm-map>