IONIC 添加GOOGLE地圖(angularJs+googleMap)

最近在做一個IONIC的移到開發，需添加地圖；因爲國外應用所以地圖插件選擇GOOGLE；廢話不多說，下面開始上代碼；

1、準備條件

angular.module('myApp', ['ngCordova', 'ionic', 'myApp.controllers'])

2、在controller.js文件 自定義Controller

.controller('GoogleMapCtrl', ['$scope', function($scope){
			var mapOptions = {
			        zoom: 14,
			        mapTypeId: google.maps.MapTypeId.TERRAIN
			    }

		    $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);
			$scope.geocoder =new google.maps.Geocoder();
		
		    $scope.infoWindow = new google.maps.InfoWindow();
		    
		    $scope.codeAddress = function() {
				$scope.geocoder.geocode({ 'address': '上海市' }, function(results, status) {
		            if(status == google.maps.GeocoderStatus.OK) {
		            	$scope.map.setCenter(results[0].geometry.location);
		                this.marker =new google.maps.Marker({
		                    title: '上海市',
		                    map: $scope.map,
		                    position:results[0].geometry.location
		                });
		                $scope.infowindow =new google.maps.InfoWindow({
		                    content: '<strong>'+ '上海市' +'</strong><br/>'+'緯度: '+ results[0].geometry.location.lat() +'<br/>經度: '+ results[0].geometry.location.lng()
		                });
		                $scope.infowindow.open($scope.map, marker);
		            }
		        });
		    };
	}])

3、html 頁面

<ion-content ng-controller="GoogleMapCtrl">
		<input type="button" ng-click="codeAddress();" value="點擊顯示上海"/>
		<div id="map" style='height:800px;width:100%;'></div>
	</ion-content>

以上代碼經測試，顯示正確；