GoogleMaps Directive

This is the Complex Example for googleMaps Example

HTML

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://maps.google.com/maps/api/js?libraries=places&amp;region=uk&amp;language=en&amp;sensor=false"></script>
    <div class="container" ng-app="googleMapSearchDemoModule" ng-controller="googleSearchMapCtrl">
      <div class="row">
        <div class="col-xs-6 form-group">
          <label>Latitude</label>
          <input type="text" ng-model="latitude" class="form-control" />
        </div>
        <div class="col-xs-6 form-group">
          <label>Longitude</label>
          <input type="text" ng-model="longitude" class="form-control" />
        </div>
      </div>
      <div class="row">
        <google-search-map latitude="latitude" longitude="longitude" map-type-id="mapTypeId" marker-image="markerImage" zoom="zoomLevel"></google-search-map>
      </div>
        <script type="text/ng-template" id="/templates/google-map-search.html">
  <div class="container">
    <div class="row" > 
        <div class="col-sm-12 form-group"> 
            <label>Enter a location</label>  <input id = "searchTextField" type = "text" ng-model="firstResult" ng-keypress="autocomplete($event)" class="form-control">
        </div>
    		<div class="col-sm-12">
    		    <div id="map_canvas"></div > 
        </div>
	</div > 
</div>
</script>
    </div>

CSS

/* Styles go here */

#map_canvas {
    height: 400px ! important;  
    margin: 0.6em;
 }

JavaScript

// Code goes here

angular.module('googleMapSearchDemoModule', [])
    .controller('googleSearchMapCtrl', ['$scope', function ($scope) {
    $scope.latitude = -33.8688;
    $scope.longitude = 151.2195;
    $scope.mapTypeId = google.maps.MapTypeId.ROADMAP;
    $scope.zoomLevel = 13;
    $scope.markerImage = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";
}]).directive('googleSearchMap', ['$timeout',function($timeout){
		return {
			restrict : 'E',
			scope : {
				latitude : '=',
				longitude  : '=',
				mapTypeId : '=',
				zoom : '=',
				markerImage : '='
			},
			templateUrl : '/templates/google-map-search.html',
			link : function($scope, $element, $attrs){

				$scope.$watch('latitude + longitude ', function(newValue) {			alert($scope.latitude + $scope.longitude);
					$scope.latLng = undefined;
					if($scope.latitude !== undefined && $scope.longitude !== undefined) {
						$scope.latLng =  new google.maps.LatLng($scope.latitude, $scope.longitude);
						var mapOptions = {           
				            center: new google.maps.LatLng($scope.latitude, $scope.longitude),           
	            			zoom: $scope.zoom,           
	            			mapTypeId: $scope.mapTypeId         
	        			};
                        $timeout(function(){
                           $scope.map = new google.maps.Map(jQuery($element).find("div#map_canvas")[0],mapOptions);
	        			$scope.marker = new google.maps.Marker({
				            position: $scope.latLng,
				            map: $scope.map,
				            icon: $scope.markerImage
				         });

	        			var input = jQuery($element).find('#searchTextField')[0]         
					    var autocomplete = new google.maps.places.Autocomplete(input, {types: ["geocode"]});
					    autocomplete.bindTo('bounds', $scope.map);
	        			$scope.infowindow = new google.maps.InfoWindow(); 
		        		google.maps.event.addListener(autocomplete, 'place_changed', function() {
		           ...