Question

我试图在我的网站上找到带有少量标记的gmaps，但我得到了灰色屏幕或部分灰色屏幕。之前，我使用谷歌地图API以同样的方式，并且每件事情都可以。如果你能帮助我，我将不胜感激。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Zadanie 7</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDPAizH-vug5nDhwYi0C5Km-pCiQRx7wpY"></script>
</head>
<body>
<div class="container-fluid" id="map" style="height: 500px;">

</div>
<div class="container-fluid">
    <div class="row content">
        <div class="col-sm-3 sidenav">
            <h4>Zadanie 6 Martin Kranec</h4>
            <ul class="nav nav-pills nav-stacked">
                <li><a href="firstpage.php">Prvá Stránka</a></li>
                <li><a href="secondpage.php">Druhá Stránka</a></li>
                <li class="active"><a href="thirdpage.php">Tretia Stránka</a></li>
            </ul><br>
        </div>
        <div class="container-fluid">
            <div class='container-fluid'><div class='table-responsive'><table class='table'><thead><tr><th>Vlajka</th><th>Štát</th><th>Počet Navštevníkov</th></tr></thead><tbody><tr><td>World</td><td>World</td><td>2</td></tr><tr><td><img class='flag' src='http://www.geonames.org/flags/x/sk.gif'></td><td><a href='countrystatistics.php?countrycode=sk'>Slovensko</a></td><td>2</td></tr></tbody></table></div></div>        </div>
    </div>
</div>


<footer class="container-fluid">
    <p>&COPY;Martin Kranec Webové technológie</p>
</footer>
<script type='text/javascript'> 
    var lat=[]; 
    var lon=[];
    lat.push(48.15);
    lon.push(17.1167);
    lat.push(48.1704);
    lon.push(17.4209);
</script>
<script>
    function initMap() {
        //alert(lat[1]);
        var mapProp = {
            center: new google.maps.LatLng(89, -25),
            zoom: 4,
            mapTypeId:google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map"), mapProp);
        var count = lat.length;
        for (var i = 0; i < count; i++) {
            var myLatLng = {lat: lat[i], lng: lon[i]};
            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                title: ''
            });
        }
    }
    initMap();
    //initMap();
</script>
<!--<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDPAizH-vug5nDhwYi0C5Km-pCiQRx7wpY&callback=initMap"></script>-->
</body>
</html>

这是我在这个项目上工作的网站http://147.175.98.165/zadanie7/thirdpage.php

Answer 1

谷歌地图有很多竞争条件。我使用这段代码来代替显示它们。这段代码应该像jquery ready一样处于就绪状态。

new Promise(function (resolve, reject) {
    if (!document.getElementById('google-maps')) {
        var fileref = document.createElement('script');
        fileref.setAttribute("type", "text/javascript");
        var link = "https://maps.googleapis.com/maps/api/js?key=AIzaSyDPAizH-vug5nDhwYi0C5Km-pCiQRx7wpY&callback=mapsFinishedLoading";
        fileref.setAttribute("async", "async");
        fileref.setAttribute("defer", "defer");
        fileref.setAttribute("src", link);
        fileref.setAttribute("id", 'google-maps');
        window.mapsFinishedLoading = resolve;
        document.getElementsByTagName("body")[0].appendChild(fileref);
    } else {
        resolve();
    }
}).then(function (result) {
    //Your map should be available now
    mapOptions={};//put your options here
    var map = new google.maps.Map(document.getElementById('map'), mapOptions);
});

在调用

之前，请确保您的地图div可见

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

谷歌地图api显示灰色屏幕

1 个答案: