画像の内容をGoogleマップに置き換えます。

Question

私は、定義されたいくつかの寸法内に画像を表示するページを持っています。私は今、ボタンをクリックしてGoogleマップを呼び出して、その次元内にGoogleマップを表示したいと考えています。 JavaScriptとAngular JSでどうすればいいですか？

P.S.私は新しいJSPを作成してボタンにリンクすることでそれができると思います。しかし、ページ全体ではなく画像部分のみを更新したいのですが、ロードに時間がかかります。

"use strict"; 
 

 
angular.module('app', []) 
 
    .controller('ctrl', ['$scope', function($scope){ 
 

 
\t // variable to hold a map 
 
\t var map; 
 
\t 
 
\t // variable to hold current active InfoWindow 
 
\t var activeInfoWindow ; \t \t 
 

 
\t // ------------------------------------------------------------------------------- // 
 
\t // initialize function \t \t 
 
\t // ------------------------------------------------------------------------------- // 
 
\t 
 
\t \t 
 
\t \t // map options - lots of options available here 
 
\t \t var mapOptions = { 
 
\t \t zoom : 8, 
 
\t \t draggable: true, 
 
\t \t center : new google.maps.LatLng(37.5622, 22.6141), 
 
\t \t mapTypeId : google.maps.MapTypeId.ROADMAP 
 
\t \t }; 
 
\t \t 
 
\t \t // create map in div called map-canvas using map options defined above 
 
\t \t map = new google.maps.Map(document.getElementById("googleMap"), mapOptions); 
 
\t \t // define two Google Map LatLng objects representing geographic points 
 
\t \t var kalamata = new google.maps.LatLng(37.0422, 22.1141); 
 
\t \t var athens \t = new google.maps.LatLng(37.9833, 23.7333); 
 

 
\t \t // place two markers 
 
\t \t fnPlaceMarkers(kalamata,"Kalamata"); 
 
\t \t fnPlaceMarkers(athens,"Athens"); 
 
\t \t 
 
\t \t window.setTimeout(function(){ 
 
\t \t  google.maps.event.trigger(map, 'resize'); 
 
\t \t },10); 
 
\t \t 
 
\t \t $scope.container = true; 
 
\t  
 
\t  $scope.toggle = function(){ 
 
\t   $scope.container = !$scope.container; 
 
\t  }; 
 
\t  
 

 
\t // ------------------------------------------------------------------------------- // 
 
\t // create markers on the map 
 
\t // ------------------------------------------------------------------------------- // 
 
\t function fnPlaceMarkers(myLocation,myCityName){ 
 
\t \t \t 
 
\t \t var marker = new google.maps.Marker({ 
 
\t \t \t position : myLocation 
 
\t \t }); 
 
\t 
 
\t \t // Renders the marker on the specified map 
 
\t \t marker.setMap(map); \t 
 

 
\t \t // create an InfoWindow 
 
\t \t var infoWnd = new google.maps.InfoWindow(); \t \t \t 
 
\t \t 
 
\t \t // add content to your InfoWindow 
 
\t \t infoWnd.setContent('<div class="scrollFix">' + 'Welcome to ' + myCityName + '</div>'); 
 
\t \t 
 
\t \t // add listener on InfoWindow - close last infoWindow before opening new one 
 
\t \t google.maps.event.addListener(marker, 'mouseover', function() { 
 
\t \t \t 
 
\t \t \t //Close active window if exists - [one might expect this to be default behaviour no?] \t \t \t \t 
 
\t \t \t if(activeInfoWindow != null) activeInfoWindow.close(); 
 

 
\t \t \t // Open InfoWindow 
 
\t \t \t infoWnd.open(map, marker); 
 

 
\t \t \t // Store new open InfoWindow in global variable 
 
\t \t \t activeInfoWindow = infoWnd; 
 
\t \t }); \t \t \t \t \t \t \t 
 
\t } 
 

 
    }]);

<img src=<%=request.getContextPath()%>/resources/images/io6.jpg style="width: 1245px; height: 290px;" ng-show="container"> 
 
<div id="googleMap" style="width:1245px;height:290px; display: inline-block;" ng-show="!container"></div>

Answer 1

あなただけのボタンをクリックすると、グーグルマップ上

<img src="dummy.jpg" ng-show="!container"> 
<div id="googleMap" ng-show="container"></div> 
<button ng-click="toggle()">Toggle</button> 

$scope.toggle = function() { 
    $scope.container = !$scope.container; 
    if($scope.container){ 
     setTimeout(function({google.maps.event.trigger(map, 'resize')}); 
    } 
}; 

example here