Google Map using directive

Set your marker and add event listener inside directive

by Jscaptcha

HTML

<script src="https://maps.googleapis.com/maps/api/js"></script>
  <div ng-app='myApp' class='col-sm-6' ng-controller='mapController'>
                   Google Map
                  <div id='mapInput'> 
                      <input type='text' ng-model='map.search'>
                      <button ng-click=getMapLocation()>Search</button>
                      <input type=text new-directive >
                  </div>
                  <div>
                            <map-directive style="height:400px;margin:12px;box-shadow:0 3px 25px black;"
                                center="loc" height = "200" width="400" zoom=5 markers="markers" > 
                            </map-directive>  
                  </div>
 </div>

JavaScript

var myApp = angular.module('myApp',[])
myApp.controller('mapController',mapController);
myApp.directive('mapDirective',mapDirective);
myApp.directive('newDirective',newDirective);
function newDirective()
{
	return {
  	link : function ($scope,$element,$attr){
    		$element.val('Type your current location');
    }
  }
}
function mapController($scope)
{
	$scope.loc= {lat:40,lon:-73}
	$scope.markers =[
					  {
					    "title": "Stockholm",
					    "lat": 26.5,
					    "lng": 73.8,
					    "description": "Stockholm is the capital and the largest city of Sweden and constitutes the most populated urban area in Scandinavia with a population of 2.1 million in the metropolitan area (2010)"
					  },
					  {
					    "title": "Oslo",
					    "lat": 18.9,
					    "lng": 72,
					    "description": "Oslo is a municipality, and the capital and most populous city of Norway with a metropolitan population of 1,442,318 (as of 2010)."
					  },
					  {
					    "title": "Copenhagen",
					    "lat": 23,
					    "lng": 77,
					    "description": "Copenhagen is the capital of Denmark and its most populous city, with a metropolitan population of 1,931,467 (as of 1 January 2012)."
					  }
					];
}
function mapDirective ()
{
	return {
		restrict : 'E',
		replace :true ,
		template : '<div></div>',
		scope : {
			center :'=',
			markers :'=',
			width :'@',
			height :'@',
			zoom : '@'
		},
		link: function(scope ,element ,attr){
			var options =[],map,currentMarker =[];
			updateControl();
			scope.$watch('center',function(){

			});

			scope.$watch('zoom',function(){

			})

			function updateControl ()
			{	
					    // if (scope.width) element.width(scope.width);
					    // if(scope.height) element.height(scope.height);
					   options = {
					   		center :new google.maps.LatLng('23.0','72.5'),
					   		zoom:6,
					   		mapTypeId:'roadmap'
					   }
					   if(scope.zoom) {
					   		options.zoom= scope.zoom * 1;
					    }	

					   map = new...