Question

我的谷歌地图遇到了问题，地图画布div不再显示了。它仍然在网站上，风格也可见，但googlemaps不会显示。

我设置了％宽度（100％）和宽度400px（我也尝试过％）。

我也会在这里发布我的代码。

        <script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>

    <script>
    (function() {

        if(!!navigator.geolocation) {

            var map;

            var mapOptions = {
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

            navigator.geolocation.getCurrentPosition(function(position) {

                var geolocate = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

                var infowindow = new google.maps.InfoWindow({
                    map: map,
                    position: geolocate,
                    content:
                        '<h1>Location pinned from HTML5 Geolocation!</h1>' +
                        '<h2>Latitude: ' + position.coords.latitude + '</h2>' +
                        '<h2>Longitude: ' + position.coords.longitude + '</h2>'
                });

                map.setCenter(geolocate);

            });

        } else {
            document.getElementById('map-canvas').innerHTML = 'No Geolocation Support.';
        }

    })();
    </script>
    <style>
        html, body
        {
              margin: 0px;
              padding: 0px
        }
    </style>
</head>

<body>
    <div id="map-canvas"></div>

这里有css

#map-canvas {
position: absolute;
float: left;
width: 100%;
height: 400px;
margin: 0 auto;
border-bottom: #F5F5F5 solid 3px;
}

有人能告诉我它有什么问题吗？

由于

Answer 1

此功能过早执行，＃map-canvas目前尚未知晓。

将脚本移动到结尾或执行函数onload

Answer 2

您的代码适用于我：FIDDLE

当我的浏览器请求了解我的地理位置的权限时，如果我回答分享，您的地图会在~5秒后出现。如果我拒绝分享它，任何东西都会出现。

你的CSS似乎没问题

width: 100%;
height: 400px;

您的浏览器是否共享其位置？这是理想的行为吗？

正如@ Dr.Molle建议的那样，你也应该在你的HTML之后移动你的

Answer 3

在程序中使用此javaScript函数：

function initialize() {
var mylatlng=new google.maps.LatLng(22.593684, 82.96288);
    var mapOptions = {
        center : mylatlng,
        zoom : 4,
        mapTypeId : google.maps.MapTypeId.HYBRID
    };
     map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);

和你的html div这样：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCoRht0hX-BXDVvGrSdXpU-yzqXosCjiz8&sensor=false"></script> 
<div id="map-canvas" style="width:100%"></div>

谷歌地图没有显示给我

3 个答案: