README.md

UI.Map

This directive allows you to add Google Maps Javascript API elements.

Requirements

• AngularJS
• UI.Event
• Google Maps Javascript API 3.x

Usage

You can get it from Bower

bower install angular-ui-map

This will copy the UI.Map files into a bower_components folder, along with its dependencies. Load the script files in your application:

<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-event/dist/event.min.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-map/src/map.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=onGoogleReady"></script>

Make sure to listen to the callback parameter when loading the Google Maps API ! The API must be fully loaded before this module ! Here we name this callback onGoogleReady. To load your angular app after the Google Maps API you can start it with angular.bootstrap.

function onGoogleReady() {
  angular.bootstrap(document.getElementById("map"), ['app.ui-map']);
}

Add the UI.Map module as a dependency to your application module :

var myAppModule = angular.module('app.ui-map', ['ui.map']);

Finally, add the directive to your html:

<section id="map" ng-controller="MapCtrl" >
  <div ui-map="myMap" ui-options="mapOptions" class="map-canvas"></div>
</section>

Note that myMap will be a google.maps.Map class, and mapOptions a google.maps.MapOptions object (see below).

To see something it's better to add some CSS, like

.map-canvas { height: 400px; }

Options