0
Angularjsを使用して、ui-booststrapモーダルで特定のコンテナ内にGoogleマップを表示したい。ここに私のコードです:角度表示 - 特定のID内にGoogleマップを表示
HTML:
<script type="text/ng-template" id="mapModalContent.html">
<div class="map-container" ng-class="{'open' : openMapContainer}">
<div class="header-section">
header
</div>
<div class="close-btn"><i class="icon icon-cancel"></i></div>
<div id="map-test" class="map-test"></div>
<div id="map-content"></div>
<div class="footer-section"></div>
</div>
</script>
角度:
var modalInstance = $uibModal.open({
templateUrl: 'mapModalContent.html',
scope: $scope,
windowClass: 'mapModal',
size: 'lg',
resolve: {
data: function() {
return $scope;
}
}
});
modalInstance.opened.then(function() {
console.log('opened');
});
}
$scope.$watch('data', function(value){
if(typeof value !== 'undefined') {
searchLatLng = new google.maps.LatLng($scope.data.latitude, $scope.data.longitude);
googleMap = new google.maps.Map($element.find('.map-content'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
searchMarker = new google.maps.Marker({
position: searchLatLng,
map: googleMap,
draggable: true
});
google.maps.event.addListener(searchMarker, 'dragend', function() {
scope.$apply(function() {
$scope.data.latitude = searchMarker.getPosition().lat();
$scope.data.longitude = searchMarker.getPosition().lng();
});
}.bind(this));
var myPosition = new google.maps.LatLng($scope.data.latitude, $scope.data.longitude);
searchMarker.setPosition(myPosition);
}
}, true);
}
コンソールでは、私は(モーダルを開くための)
はを開いてもらう
と
実は、マップはまだロードされません。なにか提案を?