在HTML中形成时,Google地图不会加载

时间:2015-12-31 03:26:47

标签: javascript android html google-maps

当我在Android上加载我的代码时,它给了我一个空白屏幕,当我在firefox中加载它时,我得到了“Map Created”,在控制台中没有错误。

<!DOCTYPE html>
<html lang="en">
<head>

    <title>HD testapp</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--Link to CSS-->
    <link rel="stylesheet" type="text/css" href="style_ride.css">
    <!--Link to Javascript file
    <script src="js.js"></script>-->

    <script src="http://maps.googleapis.com/maps/api/js"></script>

    <script>

        function initGeolocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(successCallBack, errorCallBack);
            } else {
                document.getElementById('status').innerHTML = "Geolocation failed";
            }
        }

        function errorCallBack() {
            document.getElementById('status').innerHTML = "Map failed";
        }

        function successCallBack(position) {
            var myLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            document.getElementById('status').innerHTML = "Coordinates initialized";
            var map_options = {
                zoom: 15,
                center: myLatLng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            document.getElementById('status').innerHTML = "Map options created";
            map_container = document.getElementById('map');
            document.getElementById('status').innerHTML = "Map container created";
            var map = new google.maps.Map(map_container, map_options);
            document.getElementById('status').innerHTML = "Map created";
        }
    </script>

</head>

<body onload="javascript:initGeolocation()">

<div id=map" style="height:100%; width:100%;"></div>

<p id="status"></p>

</body>

这是HTML代码,我一直在疯狂地试图弄清楚出了什么问题。我的最终目标是获得一张跟随你的地图,但要让它显示出来是第一步!

P.S。仅链接的CSS中心对齐调试文本。

/*Whole page classes*/
body {
text-align: center;
}

0 个答案:

没有答案