Question

以下是我的代码。所有JS文件都正确加载，没有JS错误，但谷歌地图没有显示在浏览器中。我检查了所有浏览器，但没有任何对我有用。

<!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"%>

<%
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>

Answer 1

你的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中使用的div。）

working example

使用jQuery Google Map插件时，谷歌地图无法显示

1 个答案: