谷歌地图未显示 [英] Google Map not shown

查看：24
本文介绍了谷歌地图未显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我写了一个网页，并将谷歌地图插入其中.但是地图总是不显示.我试着用 Firebug 看看发生了什么，发现没有错误.

地图画布的 div 已正确替换 Google Map API 但该 div 未显示...调试了几天，还是没有解决.

 <meta charset="UTF-8"><meta content="IE=Edge" http-equiv="X-UA-Compatible"><meta content="initial-scale=1.0, user-scalable=no" name="viewport"><meta charset="utf-8"><title>TaskPaneApp1</title><script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js" style=""></script><script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script><身体><!-- 页面内容--><div id="content-header"><div class="padding"><h1>欢迎</h1>

<div id="content-main"><div class="padding"><p><strong>在此处添加主屏幕内容.</strong></p><p>例如:</p><button id="get-data-from-selection">从选择中获取数据</button><p style="margin-top: 50px;"><a href="http://go.microsoft.com/fwlink/?LinkId=276812" target="_blank">在线查找更多样品...</a></p><div style="位置:相对"><p>你好！</p><div style="position: relative; width: 100%; height: 500px"><div id="map-canvas">正在加载...

<p>地图到此结束</p>

<script type="text/javascript">无功地图；函数初始化(){var mapOptions = {变焦:8，中心:新的 google.maps.LatLng(-34.397, 150.644)，mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById('map-canvas'),地图选项);}google.maps.event.addDomListener(window, 'load', initialize);</body></html>

解决方案

您的地图 div 没有大小.这:

<div id="map-canvas" style="height:300px; width:300px;">

让它为我显示.

I write a web page, and inserted Google Map into it. But the map always not shown. I tried to use Firebug to see what happened, and found there are no errors.

The div of map-canvas has been correctly replaced by Google Map API but that div not shown... I debugged this for several days, still no solution.

    <html><head>
        <meta charset="UTF-8">
        <meta content="IE=Edge" http-equiv="X-UA-Compatible">

        <meta content="initial-scale=1.0, user-scalable=no" name="viewport">
        <meta charset="utf-8">

        <title>TaskPaneApp1</title>
        <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js" style=""></script>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    </head>

    <body>
        <!-- Page content -->
        <div id="content-header">
            <div class="padding">
                <h1>Welcome</h1>
            </div>
        </div>
        <div id="content-main">
            <div class="padding">
                <p><strong>Add home screen content here.</strong></p>
                <p>For example:</p>
                <button id="get-data-from-selection">Get data from selection</button>

                <p style="margin-top: 50px;">
                    <a href="http://go.microsoft.com/fwlink/?LinkId=276812" target="_blank">
                        Find more samples online...
                    </a>
                </p>
                <div style="position: relative">
                    <p>Hey there!</p>
                    <div style="position: relative; width: 100%; height: 500px">
                        <div id="map-canvas">
                            Loading...
                        </div>
                    </div>  
                    <p>This is the end of the map</p>
                </div>
            </div>
        </div>

    <script type="text/javascript">
        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>
    </body></html>

解决方案

Your map div doesn't have a size. This: 

<div id="map-canvas" style="height:300px; width:300px;">

makes it display for me.

这篇关于谷歌地图未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

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