Ion-slide box with natvie google map plugin

Map is not showing when i am using Ion-slid box . I am using native google map for that so please help me.

My View is

<ion-view title="">
	<ion-header-bar>
		<div class="bar bar-header header_color2">
			<h3 class="left"><img src="img/logo1.png" style="width:80px;"></h3>
			<div class="right" style="border:none; background:none;">
				<button ng-click="search_input()" class="button button-clear icon_color_light icon ion-search" style="border:none;"></button>
				<button ng-click="openmodelfilter_model()" class="button button-clear icon_color_light icon ion-person" style="border:none;"></button>
			</div>
		</div>
	</ion-header-bar>
	<ion-content has-header="true" scroll="false" class="body">
		<div style="clear:both;"></div>
		<tab-slide-box scroll="false" tab="0">
			<div class="tsb-icons">
				<div class="tsb-ic-wrp" style="-webkit-transform: none !important;" >
					<a href="javascript:;" class="ion-earth"></a>
					<a href="javascript:;" class="ion-card"></a>
					<a href="javascript:;" class="ion-person"></a>
					<a href="javascript:;" class="ion-heart"></a>
				</div>
			</div>
			<ion-slide-box show-pager="false" scroll="false" on-slide-changed="slideHasChanged($index)" style="overflow-Y:scroll;">

				<ion-slide>
					<div ng-show="search_box">
						<div class="list list-inset">
						  <label class="item item-input">
							<i class="icon ion-search placeholder-icon"></i>
							<input id="pac-input" class="controls" type="text" placeholder="Search ">
						  </label>
						</div>
					</div>
					<div class="card" style="width:95%;height:450px;" id="map_canvas_div_show"></div>
					<div ng-click="openShowModalpull_up_event()" class="bar bar-footer header_color2" style="height:30px; position:fixed; bottom:0px;">
						<div class="title align_center" style="margin:-5px 0;"><i class="icon ion-chevron-up icon_color_light"></i></div>
					</div>
				</ion-slide>
				<ion-slide>
					<div class="list align_left">
						<a class="item item-thumbnail-left" ng-click="openShowModalview_event()">
						  <img src="img/profile_image.jpg">
						  <h2>Pretty Hate Machine</h2>
						  <p>Nine Inch Nails</p>
						  <p class="icon_color_green"><i class="icon ion-social-usd"></i> 2000/Month</p>
						</a>
						<a class="item item-thumbnail-left" ng-click="openShowModalview_event()">
						  <img src="img/profile_image.jpg">
						  <h2>Pretty Hate Machine</h2>
						  <p>Nine Inch Nails</p>
						  <p class="icon_color_green"><i class="icon ion-social-usd"></i> 2000/Month</p>
						</a>
						<a class="item item-thumbnail-left" ng-click="openShowModalview_event()">
						  <img src="img/profile_image.jpg">
						  <h2>Pretty Hate Machine</h2>
						  <p>Nine Inch Nails</p>
						  <p class="icon_color_green"><i class="icon ion-social-usd"></i> 2000/Month</p>
						</a><a class="item item-thumbnail-left" ng-click="openShowModalview_event()">
						  <img src="img/profile_image.jpg">
						  <h2>Pretty Hate Machine</h2>
						  <p>Nine Inch Nails</p>
						  <p class="icon_color_green"><i class="icon ion-social-usd"></i> 2000/Month</p>
						</a>
						<a class="item item-thumbnail-left" ng-click="openShowModalview_event()">
						  <img src="img/profile_image.jpg">
						  <h2>Pretty Hate Machine</h2>
						  <p>Nine Inch Nails</p>
						  <p class="icon_color_green"><i class="icon ion-social-usd"></i> 2000/Month</p>
						</a>
						<a class="item item-thumbnail-left" ng-click="openShowModalview_event()">
						  <img src="img/profile_image.jpg">
						  <h2>Pretty Hate Machine</h2>
						  <p>Nine Inch Nails</p>
						  <p class="icon_color_green"><i class="icon ion-social-usd"></i> 2000/Month</p>
						</a>
					</div>
				</ion-slide>
				
				<ion-slide style="background:none;">
					<div class="my_account">
						<div class="profile_pic_bg">
						<div class="profile_pic" style="background:url(img/mcfly.jpg); margin:0 40%;">	
						&nbsp;
						</div>
						<h4 class="align_center icon_color_light" style="margin:0 !important;padding:5px !important;">User Name</h4>
						</div>
						<div class="button-bar">
							<a class="button icon_color_light" style="border:none; background:#1995dc; line-height:30px;"><strong>500</strong>
								<p>Followers</p>		
							</a>
							<a class="button icon_color_light" style="border:none; background:#0880c5; line-height:30px;"><strong>200</strong>
								<p>Following</p>
							</a>		 
						</div>
						<div class="item background_none padding_none">
							<h2 class="align_left icon_color_dark">
							<button ng-click="openShowModalchange_pass()" class="button button-clear icon_color_dark">
							<i class="icon ion-locked"></i>
							<button ng-click="openShowModaledit_profile()" class="button button-clear icon_color_dark">
							<i class="icon ion-edit"></i>
							</button>
							</h2>
							
						</div>				
					<ul class="list list-inset background_none align_left" style="background:none;">
						<li class="item">
							<strong style="width:100%;">Email</strong>
							<p style="width:100%;">abc@gmail.com</p>
						</li>
						<li class="item">
							<strong style="width:100%;">Phone</strong>
							<p style="width:100%;">+91 898989898</p>
						</li>
						<li class="item">
							<strong style="width:100%;">Twitter</strong>
							<p style="width:100%;">abc@twitter.com</p>
						</li>
						<li class="item">
							<strong style="width:100%;">Facebook</strong>
							<p style="width:100%;">abc@facebook.com</p>
						</li>
					</ul>
					</div>
				</ion-slide>

				<ion-slide style="background:none;">
					<div class="list align_left">
						<a class="item item-thumbnail-left" ui-sref="Profle_details">
						  <img src="img/profile_image.jpg">
						  <h2>Pretty Hate Machine</h2>
						  <p>Nine Inch Nails</p>
						  <p class="icon_color_green"><i class="icon ion-social-usd"></i> 2000/Month</p>
						</a>
						<a class="item item-thumbnail-left" href="#">
						  <img src="img/profile_image.jpg">
						  <h2>Pretty Hate Machine</h2>
						  <p>Nine Inch Nails</p>
						  <p class="icon_color_green"><i class="icon ion-social-usd"></i> 2000/Month</p>
						</a>
						<a class="item item-thumbnail-left" href="#">
						  <img src="img/profile_image.jpg">
						  <h2>Pretty Hate Machine</h2>
						  <p>Nine Inch Nails</p>
						  <p class="icon_color_green"><i class="icon ion-social-usd"></i> 2000/Month</p>
						</a><a class="item item-thumbnail-left" href="#">
						  <img src="img/profile_image.jpg">
						  <h2>Pretty Hate Machine</h2>
						  <p>Nine Inch Nails</p>
						  <p class="icon_color_green"><i class="icon ion-social-usd"></i> 2000/Month</p>
						</a>
						<a class="item item-thumbnail-left" href="#">
						  <img src="img/profile_image.jpg">
						  <h2>Pretty Hate Machine</h2>
						  <p>Nine Inch Nails</p>
						  <p class="icon_color_green"><i class="icon ion-social-usd"></i> 2000/Month</p>
						</a>
						<a class="item item-thumbnail-left" href="#">
						  <img src="img/profile_image.jpg">
						  <h2>Pretty Hate Machine</h2>
						  <p>Nine Inch Nails</p>
						  <p class="icon_color_green"><i class="icon ion-social-usd"></i> 2000/Month</p>
						</a>
					</div>
				</ion-slide>
				
			</ion-slide-box>
		</tab-slide-box>
	</ion-content>
</ion-view>

and Controller is

var div = document.getElementById("map_canvas_div_show");
					var map = plugin.google.maps.Map.getMap(div);
					
					const GOOGLE = new plugin.google.maps.LatLng(22.7500, 75.1234);
					
					map.moveCamera({
						'target': GOOGLE,
						'zoom': 0
					});
					
					$scope.search_box= false;
					var search_click=0;
					$scope.search_input = function(){
						$ionicSlideBoxDelegate.update();
						if(search_click==0){
							$scope.search_box= true;
							search_click=1;
							var input = (document.getElementById('pac-input'));
							var searchBox = new google.maps.places.SearchBox((input));
							google.maps.event.addListener(searchBox, 'places_changed', function() {
								var places = searchBox.getPlaces();
								if (places.length == 0) {
									return;
								}
								for (var i = 0, place; place = places[i]; i++) {
									alert(place.name+" "+place.geometry.location.k+" "+place.geometry.location.D);
								}
							});
							google.maps.event.addListener(map, 'bounds_changed', function() {
								searchBox.setBounds(bounds);
							});
						}else{
							$scope.search_box= false;
							search_click=0;
						}
					};

Please Help me ,

Thanks in Advance

Please put this in a codepen or plunkr.

Please have a look on that but its working on device due to Phonegap Google map plugin.