谷歌地圖不顯示時，使用jQuery谷歌地圖插件

以下是我的代碼。所有JS文件加載正常，沒有JS錯誤，但谷歌地圖不會顯示在瀏覽器中。請幫我找到我的錯誤。我檢查了所有的瀏覽器，但沒有爲我工作。谷歌地圖不顯示時，使用jQuery谷歌地圖插件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><%@page 
language="java" contentType="text/html; charset=ISO-8859-1" 
pageEncoding="ISO-8859-1"%> 


<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%> 

<% 
enter code here`String contextPath = request.getContextPath(); 
%> 

<html> 

<head> 
<title>home</title> 
<style> 
     html, body, #map-canvas { 
     margin: 0; 
     padding: 0; 
     height: 100%; 
     width : 100%; 
     }  
</style> 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=&sensor=false"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> 
<script type="text/javascript" src="<%=contextPath%>/script/jquery.ui.map.js"></script> 
<script type="text/javascript"> 
     $(document).ready(function() { 
      $('#map_canvas').gmap().bind('init', function (ev, map) { 
        $('#map_canvas').gmap('addMarker', { 'position': '57.7973333,12.0502107', 'bounds': true }).click(function() { 
         $('#map_canvas').gmap('openInfoWindow', { 'content': 'Hello World!' }, this); 
        }); 
      }); 
     }); 
</script> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
</head> 
<body> 
<form:form method="post" id="searchTweetForm" action="home.do"> 
    <div id="map_canvas"/> 
</form:form> 
</body> 
</html>

來源

2013-06-01 Raj

你的CSS不正確，地圖沒有大小。該地圖是：

<div id="map_canvas"/>

變化：

<style> 
    html, body, #map-canvas { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    width : 100%; 
    }  
</style>

到：

<style> 
    html, body, #map_canvas { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    width : 100%; 
    }  
</style>

（或改變div來匹配在CSS中使用）。

working example

來源

2013-06-01 18:54:29 geocodezip

完美..非常感謝 – Raj

谷歌地圖不顯示時，使用jQuery谷歌地圖插件

回答

相關問題