Google Maps issue, map disappears after modal open


#1

I am having an issue with Google Maps disappearing after I switch views and come back to the view. It only happens after I open up a modal on the detail page.

I am using ng-maps. Any ideas on whats going wrong? Why only when the modal is opened?

<ng-map id="tour-map" center="[32.432087, -80.670142]" map-type-control-options="{position:'top_left', style:'horizontal_bar', mapTypeIds:['HYBRID','ROADMAP']}" map-type-id="ROADMAP" street-view-control="false" zoom-control="false" rotate-control="false" scale-control="false" zoom="15" min-zoom="8" tilt="0" on-click="vm.hidePopUp()">

	<marker ng-repeat="site in siteList" id="{{site.id}}" title="{{site.Name}}" position="{{site.latitude}},{{site.longitude}}" on-click="vm.showPopUp(event, site)"></marker>
	<info-window id="PopUp">
		<div ng-non-bindable class="outer-div" style="height:80px!important; max-height:80px!important">
			<a ng-href="#/app/listView/{{infoW.id}}" style="text-decoration:none!important;">
				<div class="inner-div" style="height:100%; width:100%;">
					<img ng-src="img/images/{{infoW.ImageThumb}}" style="height:80px; width:80px; float:left; padding-right:10px;">
					<div>
						<h4 style="margin-top:0; margin-bottom:4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{infoW.Name}}</h4>
						<div ng-if="infoW.NameAlt" style="font-size:larger; color:black; font-weight:500; margin-bottom:8px;">"{{infoW.NameAlt}}"</div>
						<div>{{infoW.Address}}</div>
					</div>
				</div>
			</a>
		</div>
	</info-window>

</ng-map>