Angular Directives - Google Maps

Example with a simple map directive, geolocation, and current location.

by Annie Lagang

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="https://maps.googleapis.com/maps/api/js?sensor=true&amp;jsfiddler=.js"></script>
<body ng-app="app" ng-controller="appCtrl">

<h3>Google Maps</h3>

    <!-- search/go to current location -->
    <div class="text-right">
        <div class="input-append text-right">
            <input type="text" ng-model="search" value="115 Don Carlos Palanca, Legazpi Village, Makati"/>
            <button class="btn" type="button" ng-click="geoCode()" ng-disabled="search.length == 0" title="search">
              &nbsp;<i class="icon-search"></i>
            </button>
            <button class="btn" type="button" ng-click="gotoCurrentLocation()" title="current location">
              &nbsp;<i class="icon-home"></i>
            </button>
        </div>
    </div>

    <!-- map -->
    <app-map style="height:400px;margin:12px;box-shadow:0 3px 25px black;"
        center="loc"
        markers="stores"
        zoom="18"
    > 
    </app-map>

    <!-- current location -->
    <div class="text-info text-right">
        {{loc.lat | lat:0}}, {{loc.lon | lon:0}}
    </div>

    <!-- list of airports -->
    <div class="container-fluid">
        <div class="span3 btn" 
            ng-repeat="a in airports"
            ng-click="gotoLocation(a.lat, a.lon)">
            <b>{{a.code}}</b>: {{a.name}}
        </div>
    </div>
</body>

JavaScript

var app = angular.module("app", []);

app.controller("appCtrl", function ($scope) {

    // current location
    //$scope.loc = { lat: 40, lon: -73 };
    //$scope.loc = {lat: 14.554999, lon: 121.018603};
    $scope.loc = {lat: 0, lon: 0};
    $scope.gotoCurrentLocation = function () {
        if ("geolocation" in navigator) {
            navigator.geolocation.getCurrentPosition(function (position) {
                var c = position.coords;
                $scope.gotoLocation(c.latitude, c.longitude);
            });
            return true;
        }
        return false;
    };
    $scope.gotoLocation = function (lat, lon) {
        if ($scope.lat != lat || $scope.lon != lon) {
            $scope.loc = { lat: lat, lon: lon };
            if (!$scope.$$phase) $scope.$apply("loc");
        }
    };

    // geo-coding
    $scope.search = "";
    $scope.geoCode = function () {
        if ($scope.search && $scope.search.length > 0) {
            if (!this.geocoder) this.geocoder = new google.maps.Geocoder();
            this.geocoder.geocode({ 'address': $scope.search }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var loc = results[0].geometry.location;
                    $scope.search = results[0].formatted_address;
                    $scope.gotoLocation(loc.lat(), loc.lng());
                } else {
                    alert("Sorry, this search produced no results.");
                }
            });
        }
    };

    // some points of interest to show on the map
    // to be user as markers, objects should have "lat", "lon", and "name" properties
$scope.stores = [
        { "name": "Cambria", "lat": 14.554999, "lon": 121.018603 }
];
    $scope.airports = [
        { "name": "Hartsfield Jackson Atlanta", "code": "ATL", "city": "Atlanta", "state": "GA", "lat": 33.64, "lon": -84.444, "vol2011": 44414121 },
        { "name": "O'Hare", "code": "ORD", "city": "Chicago", "state": "IL", "lat":...