谷歌地图不显示时，使用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谷歌地图插件

回答

相关问题