Google Map Directive

by Freewind

HTML

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.angularjs.org/1.0.1/angular-1.0.1.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
      
<div ng-app="googleMap">
    <div ng-controller="MapCtrl">
        <div>{{ center }}</div>
        <map id="map_canvas1" zoom="12" center="center" maptype="roadmap" scrollwheel="false"></map>
        <map id="map_canvas2" zoom="8" center="center" maptype="satellite" scrollwheel="true"></map>
    </div>
</div>

CSS

.map{
    width:100%;
    height: 250px; 
    border: 1px solid #333335;
    margin-bottom:20px;
}

JavaScript

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

function MapCtrl($scope) {  
    $scope.center = {
       lat: 43.6469406,
       lon: -79.4000197
    };
}


module.directive('map', function() {
        return {
            restrict: 'E',
            replace: true,
            template: '<div></div>',
            scope: {center: '='},
            link: function(scope, element, attrs) {
                element.addClass('map');

                var myOptions = {
                    zoom: 12,
                    center: new google.maps.LatLng(scope.center.lat, scope.center.lon),
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    scrollwheel: true
                };

                //zoom as attribute
                if(attrs.zoom && parseInt(attrs.zoom)) myOptions.zoom = parseInt(attrs.zoom);
                //center as attribute
                if(attrs.center){
                    var center = scope.$eval(attrs.center);
                    if(parseFloat(center.lat) && parseFloat(center.lon))
                        myOptions.center = new google.maps.LatLng(parseFloat(center.lat), parseFloat(center.lon));
                }
                //maptype as attribute
                if(attrs.maptype){
                     switch(attrs.maptype.toLowerCase()){
                         case 'hybrid':
                             myOptions.mapTypeId = google.maps.MapTypeId.HYBRID;
                             break;
                         case 'roadmap':
                             myOptions.mapTypeId = google.maps.MapTypeId.ROADMAP;
                             break;
                         case 'satellite':
                             myOptions.mapTypeId = google.maps.MapTypeId.SATELLITE;
                             break;
                         case 'terrain':
                             myOptions.mapTypeId = google.maps.MapTypeId.TERRAIN;
                             break;
                         default:
                       ...