34

より大きなプロジェクトの一環として、GoogleのMapAPIv3を使用してサイトで地図を取得しようとしています。私はGoogleが提示した最も簡単な手順に従い、他の作業マップからコードを完全にコピーしてみました。しかし、私が何をしても、私たちが得るのは灰色のボックスだけで、地図はありません。

Firebugを使用すると、マップにデータを入力しようとしている情報を確認できますが、表示されていません。私はjqueryを試しました。これはGoogleマップ用に特別に作成されたjqueryライブラリですが、何も機能していません。私はインターネットを行き来していて、すべてグーグルのAPIヘルプファイルを介して行ってきました。さらに、ファイルを複数のサーバーにアップロードし、複数のブラウザーとコンピューターでテストしたため、問題はローカルではありません。何も機能していません。

この時点で、私が見落としているのは愚かなことです。これが私のコードです。

<!DOCTYPE html>
<html>
<head>
<title></title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?&sensor=true">
</script>  
<script type="text/javascript">

    function load() 
    {
        var mapDiv = document.getElementById("map");
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var mapOptions = 
        {
            //zoom: 8,
            center:latlng,
            //backgroundColor: '#ff0000',
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            imageDefaultUI: true
        };
        var map = new google.maps.Map(mapDiv, mapOptions);

        function createMarker(point, text, title) 
        {
          var marker =
          new GMarker(point,{title:title});
          return marker;
        }
    }

</script>
  </head>
  <body onload="load()">
    <div id="map" style="width: 800px; height: 400px;"></div>
</div>
</body>
</html>
4

14 に答える 14

40

これは私のために働きます。パラメータを設定するだけです。zoom

更新（@ user2652379 zoomによる）：両方とオプションを設定する必要がありcenterます。ただzoom動作しません。

<!DOCTYPE html>
<html>
<head>
<title></title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</script>  
<script type="text/javascript">

    function load() 
    {
        var mapDiv = document.getElementById("map");
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var mapOptions = 
        {
            zoom: 8,
            center:latlng,
            //backgroundColor: '#ff0000',
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            //imageDefaultUI: true
        };
        var map = new google.maps.Map(mapDiv, mapOptions);
       // map.addControl(new GSmallMapControl());
       // map.addControl(new GMapTypeControl());
       // map.addMapType(ROADMAP);
       // map.setCenter(
       // new GLatLng(37.4419, -122.1419), 13);
    }

</script>

  </head>
  <body onload="load()">
    <div id="map" style="width: 800px; height: 400px;">&nbsp;</div>
</body>
</html>
于 2012-07-31T22:15:29.037 に答える
12

もう 1 つのケースは、マップを初期化した時点でマップ コンテナーが非表示になっている場合です。たとえばshow.bs.modal、代わりにブートストラップイベント内でそれを行っていますshown.bs.modal

于 2016-07-12T15:17:53.387 に答える
11

私は同じ問題を抱えていて、stackoverflow に関する多くのトピックに出くわしましたが、どれも私にとって有効な解決策を持っていませんでした。最終的に、追加したcssの行が原因であることがわかりました。

マップ内のすべての要素は、

overflow:hidden;

CSSに次の行を追加することで修正されました

#map * {
    overflow:visible;
}
于 2016-04-04T14:21:57.147 に答える
5

また、マップの中心またはマーカーの緯度または経度の値が無効であることにも注意してください。たとえば、このフィドルはグレーの死の地図を表示します。これは、マップの中心が無効な緯度 131.044 にあるためです (+90:-90 からではありません)。

function initMap() {
  var uluru = {lat: 131.044, lng: -25.363};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map
  });
}
于 2017-07-15T19:47:52.763 に答える
2

同じ問題がありました。Jqueryアコーディオンで Google マップを使用していましたが、div を展開すると、マップは灰色の領域のみで構成されていました。指定したアコーディオンの見出しでクリック イベントをトリガーし、マップ コンテナーを表示に設定することで、この問題を解決できました。

脚本：

<script type="text/javascript">
    var map;

    function initMap(lat, lng) {
        var myCenter = new google.maps.LatLng(lat, lng);

        var mapOptions = {
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: myCenter
        };

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

    }
    function ViewMap() {
        var latlng = document.getElementById('<%=txt.ClientID%>').value.split(','); // This is where my latlng are placed: 25.12312,55.3212333
        $("#showmap").show();
        // Sorry for mixing up Jquery and javascript.
        initMap(latlng[0], latlng[1]);
    }

</script>

ASPX ファイル/Html マークアップ:

<h3 id="lMap" onclick="ViewMap();"><i class="fa fa-map-o" onclick="ViewMap();"></i>Location Map</h3>
<div style="height:auto" id="showmap">
   <div id="map" style="width: 850px; height: 550px; overflow: visible"></div>
</div>
于 2016-09-22T19:29:46.330 に答える
1

私も取り組んでいるサイトでこの問題が発生しました。応答性のために、すべての<img>タグに対していくつかのことを行っています。この修正は、マップに対して機能しています。

img {max-width: initial !important;}
于 2017-03-24T13:14:19.303 に答える