Google Map Directive

by Zineb ERRAHMOUNI

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
      
<div ng-app="MyMap">
  <div data-ng-controller="mapController as vm">
    
    <label>X : </label><input data-ng-model="vm.center.x"/>
    <label>Y : </label><input data-ng-model="vm.center.y"/>
    <label>Zoom : </label><input data-ng-model="vm.zoom"/> 
  
  
     <gmap lngx="vm.center.x" lngy="vm.center.y"  zoom="vm.zoom" id="map"></gmap>
    
    
    </div>
</div>

CSS

#map{
  margin: 0;
  padding: 0;
  width: 450px;
  height: 450px;
  border: 1px solid grey;
}

JavaScript

"use strict";

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

var mapController = function(){
		
    var vm = this;
  	vm.center = {};
    vm.center.x =  46.87916;
    vm.center.y =  -3.32910;
    vm.zoom= 3;    
    
  
};

// controller
module.controller("mapController",mapController);

module.directive('gmap', function() {
    return {
        restrict: 'E',
        scope:{
            lngx: '=',
            lngy: '=',
            zoom: '='
        },
        replace: true,
        template: '<div></div>',
        link: function(scope, element, attrs) {         
            var myOptions = {
                zoom: scope.zoom,
                center: new google.maps.LatLng(scope.lngx, scope.lngy)
            };
            var map = new google.maps.Map(document.getElementById(attrs.id), myOptions);
            scope.$watch('vm.center.x', function() {
          		renderMap(10,-3,1);
        		});
        }
    };
});