Google Map Directive

by Bretto

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc4.min.js"></script>
<script src="http://code.angularjs.org/angular-resource-1.0.0rc4.min.js"></script>
<link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.css">
<script src="http://code.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://raw.github.com/gist/1716010/aee7456d81622e253397e61e080504e8b886d05e/TileLayer.TileJSON.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">
        <map id="map_canvas"></map>
    </div>
</div>

CSS

#map_canvas{
    width:100%;
    height: 450px; 
    border: 1px solid #333335;
    margin-bottom:20px;
}

JavaScript

var module = angular.module('googleMap', []);
module.directive('map', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<div></div>',
        link: function(scope, element, attrs) {
            console.log(element);
            
            var myOptions = {
                zoom: 6,
                center: new google.maps.LatLng(46.87916, -3.32910),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById(attrs.id), myOptions);
            
            google.maps.event.addListener(map, 'click', function(e) {
                scope.$apply(function() {
                    addMarker({
                    lat: e.latLng.lat(),
                    lng: e.latLng.lng()
                  }); 
                    
                    console.log(e);
                });
    
            }); // end click listener
            
            addMarker= function(pos){
               var myLatlng = new google.maps.LatLng(pos.lat,pos.lng);
               var marker = new google.maps.Marker({
                    position: myLatlng, 
                    map: map,
                    title:"Hello World!"
                });
            } //end addMarker
            
        }
    };
});

function MapCtrl($scope) {
        
    $scope.mapPin = 'No pin set yet';       
          
}