구글 맵은 웹 페이지에

Question

HTML 표시되지

컨트롤러 부분 :

// Google지도

$scope.map = { 
    center: { 
     latitude: 0, 
     longitude: 0 
    }, 
    zoom: 1, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    control: {} 
}; 

// place a marker 
$scope.markers = []; 

function setMarker(lat, long, title, content) { 
    var marker = { 
     id: $scope.markers.length+1, 
     coords: { 
      latitude: lat, 
      longitude: long 
     }, 
     content: content, 
     options: { 
      title: title, 
      icon: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png' 
     } 
    }; 
    $scope.markers.push(marker); 
}; 

$scope.DrawMap = function(response) { 
    console.log("DrawMap"); 
    $scope.markers = []; 
    var data = response.json.response.data[0].data[1]; 
    var markerLatLng = []; 
    var map = $scope.map.control.getGMap(); 
    var bounds = new google.maps.LatLngBounds(); 


    // set zoom level based on xlabel 
    var level = response.json.response.data[0].xlabel; 
    if (level === 'country') { 
     $scope.map.zoom = 4; 
    } else if (level === 'state') { 
     $scope.map.zoom = 4; 
    } else if (level === 'city') { 
     $scope.map.zoom = 6; 
    } else if (level === 'All Centres') { 
     $scope.map.zoom = 8; 
    }else if (level ==='divisons'){ 
     $scope.map.zoom =10; 
    } else { 
     $scope.map.zoom = 4; //default to zoom 10 
    }; 


    //set markers for each data 
    $.each(data, function(key, entry) { 

     setMarker(entry.lat, entry.long, 
       entry.x, 
       /*response.json.response.data[0].data[0] +*/ 
       response.json.response.data[0].s1 + ": " + entry.s1 + " "+" "+ 
      response.json.response.data[0].s2 + ": " + entry.s2); 
     var point = new google.maps.LatLng(entry.lat, entry.long); 

     markerLatLng.push(point); 
     var loc = new google.maps.LatLng(entry.lat, entry.long); 
     bounds.extend(loc); 
    }); 

    map.fitBounds(bounds); 
} 

내가 HTML과 표시 JS 이상이 내 웹 페이지의지도 데이터. 기본적으로지도는 CSS 속성 position as absolute을 사용하지만 고정 된지도 만 표시하면 내 웹 페이지에 표시되며 전체 웹 페이지지도에도 표시됩니다. 고정 된 위치를 부여 할 때, 응답으로 주어진 데이터 마커가있는지도를 찾을 수 있습니다. 여기서 문제가 될 것입니다.

Answer 1

지도 컨테이너를 가져 와서 idth:600px; and height:400px; with position : fixed지도가 생성되었습니다.