blog-angular-ui-map-markers

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;.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>
<div ng-app='maptesting'>
    <div ng-controller="MapCtrl">
        <div ui-map-info-window="myInfoWindow"> <b>Current location</b>

        </div>
        <div ui-map-marker="meMarker"></div>
        <div ui-map-marker="newTingMarker" ui-event="{'map-click': 'openMarkerInfo(newTingMarker)'}"></div>
        <section id="newTingMap">
            <div id='map' ui-map="myNewTingMap" ui-options="newMapOptions" class="map-canvas" ui-event="{'map-tilesloaded': 'initMap()', 'map-click': 'addMarker($event, $params)' }"></div>
        </section>
    </div>
</div>

CSS

#map{
    height: 400px;
}

JavaScript

angular.module('maptesting', ['ui.map', 'ui.event'])
    .factory('watchArray', function () {
    return function (scope, watchExpression, compare, onAdd, onRemove) {
        scope.$watch(watchExpression, function (newArray, oldArray) {
            //added
            newArray.filter(function (n) {
                return oldArray.filter(function (o) {
                    return compare(n, o);
                }).length === 0;
            }).forEach(function (n) {
                onAdd(n);
            });

            //removed
            oldArray.filter(function (o) {
                return newArray.filter(function (n) {
                    return compare(n, o);
                }).length === 0;
            }).forEach(function (o) {
                onRemove(o);
            });

        }, true);
    };
});

function MapCtrl($scope, watchArray) {
    var center;
    if ($scope.position) {
        center = new google.maps.LatLng($scope.position.lat, $scope.position.lng);
    } else {
        center = new google.maps.LatLng(37.5410, 77.4329)
    }
    $scope.newMapOptions = {
        center: center,
        zoom: 18,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }


    $scope.getLocation = function () {
        if (navigator.geolocation) {
            return navigator.geolocation.getCurrentPosition(setPosition);
        };
    }


        $scope.addMarker = function ($event, $params) {
            alert($params[0][0]);
            $scope.newTingMarker = new google.maps.Marker({
                map: $scope.myNewTingMap,
                        position: $params[0].latLng
            });
        };

        $scope.initMap = function () {
            if (!$scope.mapLoaded) $scope.getLocation();
            $scope.mapLoaded = true;
        };

        function setPosition(pos) {
            $scope.position = {
                lat: pos.coords.latitude,
                lng: pos.coords.longitude
            };
            $scope.meMarker = new google.maps.Marker({
 ...