加载一个jsp页面包含Gmap,在另一个jsp页面的div上

时间:2013-09-03 06:52:13

标签: javascript jquery google-maps-api-3

我正在尝试加载一个包含谷歌地图的jsp页面,在另一个jsp页面div中,但它没有在该div上显示地图。处理了其他两个jsp页面,未处理的div很好。

// JSP hello.jsp

<script>
$(function() {
$( "#tabs" ).tabs();
$("#map_canvas").load("map.jsp");
$("#tabs-1").load("Processed.jsp");
$("#tabs-2").load("UnProcessed.jsp");
});
</script>

<div id="tabs">
<ul>
<li> <a href="#map_canvas">GMaps</a></li>
    <li> <a href="#tabs-1">Processed </a></li>
    <li> <a href="#tabs-2">UnProcessed </a></li>
</ul>
<div id ="map_canvas"></div>
<div id="tabs-1"></div>
<div id="tabs-2"></div>
</div></body></html>

// map.jsp

<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
  #map-canvas {
    margin: 0;
    padding: 0;
    width: 600px;
    height: 300px;
  }
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>

// I had already spent too much time on this but still not getting result , map is not   loading on page , please help me to load map.jsp on`map_canvas` div in hello.jsp . Thanks A tonn...

1 个答案:

答案 0 :(得分:0)

伙计,我得到了你的问题,

在map.jsp中,use可能正在使用某些样式,如

#map-canvas {
        width: 500px;
        height: 400px;
      }

将此css删除并粘贴到hello.jsp代码中 尝试粘贴hello.jsp页面中的javascript代码,即初始化和loadScript函数 休息一切都很好,在这里进行了本地测试,也应该适合你