blog-angular-ui-map-markers

by Sledgehammer

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="http://www.flocations.com/static/vendor/angular-ui/map/ui-map.min.js"></script>
<script src="http://www.flocations.com/static/vendor/angular-ui/event/event.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<div ng-app='maptesting'>
    <tabs>
        <pane title="home">
        </pane>
        <pane title="map">
    <div ng-controller="MapCtrl">
        <div id="map_canvas" ui-map="myMap" 
        style="height:300px;width:400px;border:2px solid #777777;margin:3px; border:1px solid" 
        ui-options="mapOptions" 
        ui-event="{'map-idle' : 'onMapIdle()'}"
        >
        </div>
        
        <!--In addition to creating the markers on the map, div elements with existing google.maps.Marker object should be created to hook up with events -->
        <div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]"
                        ui-event="{'map-click': 'markerClicked(marker)'}">
        </div>
    </div>
        </pane>
    </tabs>
</div>

JavaScript

//Add the requried module 'angular-ui' as a dependency

var KPN = angular.module('KPN', [
    'KPNControllers',
    'KPNDirectives'])

var KPNControllers = angular.module('KPNControllers', [ 'ui.map','ui.event']);

KPNControllers.controller('MapCtrl',[$scope]);

function MapCtrl($scope) {
    var ll = new google.maps.LatLng(13.0810, 80.2740);
    $scope.mapOptions = {
        center: ll,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    //Markers should be added after map is loaded
    $scope.onMapIdle = function() {
        if ($scope.myMarkers === undefined){    
            var marker = new google.maps.Marker({
                map: $scope.myMap,
                position: ll
            });
            $scope.myMarkers = [marker, ];
        }
    };

    $scope.markerClicked = function(m) {
        window.alert("clicked");
    };

}
                                
var KPNDirectives = angular.module('KPNDirectives', []);

KPNDirectives.directive('tabs', function () {
    return {
        restrict: 'E',
        transclude: true,
        scope: {},
        controller: ["$scope", function ($scope) {
            var panes = $scope.panes = [];

            $scope.select = function (pane) {
                angular.forEach(panes, function (pane) {
                    pane.selected = false;
                });
                pane.selected = true;
            }

            this.addPane = function (pane) {
                if (panes.length == 0) $scope.select(pane);
                panes.push(pane);
            }
        }],
        template:
            '<div class="tabbable">' +
            '<ul class="nav nav-tabs">' +
            '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">' +
            '<a href="" ng-click="select(pane)">{{pane.title}}</a>' +
            '</li>' +
            '</ul>' +
            '<div class="tab-content" ng-transclude></div>' +
            '</div>',
        replace: true
   ...