Google Maps API v3 |不显示地图数据 [英] Google Maps API v3 | shows no map data

查看：31
本文介绍了Google Maps API v3 |不显示地图数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在为我们当地的消防员之家编写一个小型 JavaScript 应用程序.该应用程序有点像 powerpoint 等，但在 html 中.在这个应用程序中，我将显示一个谷歌地图地图，其中包含一条路线，显示从消防员家到火场的路线.我使用 jquery 从 http 服务器请求数据.

我的问题是我已经插入了 google maps api 的代码，浏览器向我显示了带有 google 徽标等的地图对象.但是没有地图，只有灰色的背景.使用鼠标，我似乎可以在地图中放大/缩小、滚动等(如果我进行交互，在萤火虫中会将数据传输到 google api)，但地图不在那里.

我的个人地图 api 密钥已插入，如果我删除它，插件会显示失败.所以我认为这不是问题.

jquery 和 maps api 有问题吗?周围还有其他人遇到这个问题吗?

<头><title></title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link rel="stylesheet" type="text/css" href="./css/standard.css"><script src="./js/libs/jquery-1.9.0/jquery.min.js" type="text/javascript"></script><脚本类型=文本/javascript"src="http://maps.googleapis.com/maps/api/js?key=api_key&sensor=false"><script type="text/javascript">函数初始化(){var mapOptions = {中心:新的 google.maps.LatLng(50.98188, 6.78655)，变焦:8，mapTypeId: google.maps.MapTypeId.ROADMAP};var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);window.console.log("位置中心:"+map.getCenter()+"
Zoom:"+map.getZoom());地图.setZoom(12);map.setCenter(new google.maps.LatLng(0, 0));window.console.log("位置中心:"+map.getCenter()+"
Zoom:"+map.getZoom());}<身体><div id="site_content"><div id="head_left" class="background_box">

<div id="head_center" class="background_box"><div class="heading"></div>

<div id="head_right" class="background_box"><h1 class="date_data"></h1><h1 class="time_data"></h1>

<div class="spacing_data"></div><div id="data_box" class="background_box"><div id="map_canvas" style="width: 100%;height: 100%"></div>

<div class="spacing_data"></div><div id="footer_left" class="background_box">

<div id="footer_center" class="background_box"><div class="footer"></div>

<div id="footer_right" class="background_box">

<脚本>jQuery.getScript("./js/initialisation.js",function(){initialisation();});初始化();

没有内容，因为这些都是在运行时通过 jquery 从服务器加载，然后插入到 dom 中.

解决方案

参见 迈克威廉姆斯的描述来自他的 v2 教程的百分比大小的地图

您需要为地图的所有父元素添加定义，以允许浏览器计算非零大小.

工作示例

<头><title></title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><style type="text/css">html，正文{宽度:100%；高度:100%；}</风格><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script><script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script><script type="text/javascript">函数初始化(){var mapOptions = {中心:新的 google.maps.LatLng(50.98188, 6.78655)，变焦:8，mapTypeId: google.maps.MapTypeId.ROADMAP};var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);window.console.log("位置中心:"+map.getCenter()+"
Zoom:"+map.getZoom());地图.setZoom(12);map.setCenter(new google.maps.LatLng(0, 0));window.console.log("位置中心:"+map.getCenter()+"
Zoom:"+map.getZoom());}google.maps.event.addDomListener(window,"load",initialize);<身体><div id="site_content" style="width: 100%;height: 100%;"><div id="head_left" class="background_box" >
<div id="head_center" class="background_box"><div class="heading"></div>
<div id="head_right" class="background_box"><h1 class="date_data"></h1><h1 class="time_data"></h1>
<div class="spacing_data"></div><div id="data_box" class="background_box" style="width: 100%;height: 100%;"><div id="map_canvas" style="width: 100%;height: 100%;"></div>
<div class="spacing_data"></div><div id="footer_left" class="background_box">
<div id="footer_center" class="background_box"><div class="footer"></div>
<div id="footer_right" class="background_box">

i'm program a small javascript application for our local firefighter home. The application is a little like powerpoint etc. but in html. In this application i would show a google maps map with a route that shows the way from the firefighter home to the fire. I use jquery for requesting the data from the http server.

My Problem is that i have inserted the code for the google maps api and the browser shows me the maps object with the google logo and so on. But there is no map, there is only a gray background. With the mouse it seems that i can zoom in/out, scroll etc in the map (if i interact, in firebug comes datatransfers to the google api), but the map wasn't there.

My personal maps api key is inserted and if i delete it the plugin shows a failure. So i think that can't be the problem.

is there a problem with jquery and the maps api? Anyone else around having this problem?

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="./css/standard.css">
    <script src="./js/libs/jquery-1.9.0/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript"
        src="http://maps.googleapis.com/maps/api/js?key=api_key&sensor=false">
    </script>
    <script type="text/javascript">
        function initialize() {
            var mapOptions = {
                center: new google.maps.LatLng(50.98188, 6.78655),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
            window.console.log("Position center: "+map.getCenter()+"
Zoom: "+map.getZoom());
            map.setZoom(12);
            map.setCenter(new google.maps.LatLng(0, 0));
            window.console.log("Position center: "+map.getCenter()+"
Zoom: "+map.getZoom());
        }
    </script>
</head>
<body>
    <div id="site_content">
        <div id="head_left" class="background_box">
        </div>
        <div id="head_center" class="background_box">
            <div class="heading"></div>
        </div>
        <div id="head_right" class="background_box">
            <h1 class="date_data"></h1>
            <h1 class="time_data"></h1>
        </div>
        <div class="spacing_data"></div>
        <div id="data_box" class="background_box">
            <div id="map_canvas" style="width: 100%;height: 100%"></div>
        </div>
        <div class="spacing_data"></div>
        <div id="footer_left" class="background_box">
        </div>
        <div id="footer_center" class="background_box">
            <div class="footer"></div>
        </div>
        <div id="footer_right" class="background_box">
        </div>
    </div>
    <script>
        jQuery.getScript("./js/initialisation.js",function(){initialisation();});
        initialize();
    </script>
</body>

there is no content because this is all loaded at runtime from the server over jquery and then inserted into dom.

解决方案

See Mike Williams' description on percentage sized maps from his v2 tutorial

You need to add definitions to all the parent elements of the map to allow the browser to calculate a non-zero size.

working example

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
html,body {
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
        function initialize() {
            var mapOptions = {
                center: new google.maps.LatLng(50.98188, 6.78655),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
            window.console.log("Position center: "+map.getCenter()+"
Zoom: "+map.getZoom());
            map.setZoom(12);
            map.setCenter(new google.maps.LatLng(0, 0));
            window.console.log("Position center: "+map.getCenter()+"
Zoom: "+map.getZoom());
        }
google.maps.event.addDomListener(window,"load",initialize);
</script>
</head>
<body>
    <div id="site_content" style="width: 100%;height: 100%;">
        <div id="head_left" class="background_box" >
        </div>
        <div id="head_center" class="background_box">
            <div class="heading"></div>
        </div>
        <div id="head_right" class="background_box">
            <h1 class="date_data"></h1>
            <h1 class="time_data"></h1>
        </div>
        <div class="spacing_data"></div>
        <div id="data_box" class="background_box" style="width: 100%;height: 100%;">
            <div id="map_canvas" style="width: 100%;height: 100%;"></div>
        </div>
        <div class="spacing_data"></div>
        <div id="footer_left" class="background_box">
        </div>
        <div id="footer_center" class="background_box">
            <div class="footer"></div>
        </div>
        <div id="footer_right" class="background_box">
        </div>
    </div>
</body>
</html>

这篇关于Google Maps API v3 |不显示地图数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆