Google Maps UI with Angular 1.0.0rc6

Setting the name on an input element so that can show validation errors.

by programmieraffe

HTML

<script src="http://ci.angularjs.org/job/angular.js-angular-master/ws/build/angular.min.js"></script>
<p>Google Maps API v3 with Angular</p>
<hr/>
<div ng-app="interfaceSettings">
    
    Angular: 1.0.0rc6 
    <h2>Google Maps</h2>
<div ng-controller="TestDirective">
    Zoom: {{mapZoomValue}}<br />
    Center: {{map.center}}<br />
    <div style="width:400px;height:400px;"><ui:map ui:pin="mapPin" ui:zoom="mapZoomValue"></ui:map></div>
    <ng:include src="'template-map.html'"></ng:include>
</div>



 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&region=pl"></script>
</div>

CSS

body {
    padding: 10px; 
    font-family: sans-serif; 
    font-size: 0.9em;
}
form label {font-weight:bold;margin-right:10px;font-size:0.9em;}
form label:after {content:':';}
input.ng-invalid, select.ng-invalid, textarea.ng-invalid, input.formElement.ng-invalid {
    border: solid 1pt red;
}
div.formEntry {
    margin-bottom:5px;padding-bottom:10px;border-bottom:solid 1px #eee;   
}

JavaScript

var settingsModule = angular.module('interfaceSettings', []);


function TestDirective($scope,$templateCache) {
    
$templateCache.put('template-map.html','<div style="width:400px;height:400px;"><ui:map ui:pin="mapPin" ui:zoom="mapZoomValue"></ui:map></div>');
    
    $scope.settings = {
        angularVersion: angular.version
    };

    $scope.map = {};
    $scope.mapZoomValue = 10;

}

settingsModule.directive('uiMap',function(){
    return{
        restrict:'E',
        //compile:function(el,attrs){},
        template:'<div class="map" style="height:100%"></div>',
        replace:true,
        link:function(scope, iElement, attrs, controller){
            
            console.log('SCOOOOOOOOOPE:',scope);
        
            if(!google || !google.maps)
                return;
        
            var elem = iElement; // jquery element
            // Reset it?
            elem.html(''); // does not help? (open second map causes issues) - check that
            console.log('ELEMEEEEEEEEEEEEEEEEEEEEEEEENT',elem.data('map'));
            // from angularjs user group
            // https://groups.google.com/forum/?fromgroups#!topic/angular/txZT_T_sYv4
            // we use the assign function
        
            // get attributes
            // 2DO: they can't be empty? (required attributes
            var pinExpr = attrs.uiPin || 'mapPin';
            var viewExpr = attrs.uiView || 'map'; // 2DO: right defaults?
            var pointsExpr = attrs.uiPoints || 'points';
            var zoomExpr = attrs.uiZoom || 'mapZoom';
            var selectedPointIdExpr = attrs.uiSelectedPointId || 'selectedPointId';        
            var markers = [];
        
            var defaults = {
                bindZoom : true, 
                bindMapType: false, 
                pinDraggable: true, 
                map: {
                    zoom: 4, 
                    center: new google.maps.LatLng(0, 0),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
       ...