0

v3 API を使用して Google マップを埋め込みたい:

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <div class="map"></div>
    <script src="http://maps.googleapis.com/maps/api/js?v=3&key=mykey&sensor=false&region=DE"></script>
    <script>
      new google.maps.Map(document.querySelector('div.map'), {
        zoom: 4, center: new google.maps.LatLng(0, 0)
      });
    </script>
  </body>
</html>

その結果、すべての ajax を正常にロードしてdiv.mapにレンダリングしますが、マップはベージュ/グレーで、コントロールがありません。

ノート：

  • key=mykeyは、API キーのプレースホルダーです
  • document.querySelectorは一致する要素ノードを返し、ブラウザで動作します
  • ROADMAPがデフォルトであるため、マップ タイプを省略できます。
  • ドキュメントの最後にあるため、ロードイベント ラッパーにロジックを配置する必要はありません。

したがって、上記のことについて何もアドバイスしないでください-私はすでにそれらを試しました!

それで、私は何を間違っていますか？

ボードー

4

2 に答える 2

1

ドキュメントごとにmapTypeIdが必要です

mapTypeId MapTypeId 初期マップ mapTypeId。必須。

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <div class="map" style="height:500px; wiodth:600px;"></div>
    <script src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false&region=DE"></script>
    <script>
      new google.maps.Map(document.querySelector('div.map'), {
        zoom: 4, center: new google.maps.LatLng(0, 0), mapTypeId: google.maps.MapTypeId.ROADMAP
      });
    </script>
  </body>
</html>

実施例

于 2013-06-13T16:16:31.333 に答える
0

Google の例に従って、CSS を追加して地図を特定のサイズで表示します。

<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  .map { height: 100% }
</style>

変数にマップを代入してみてください:

var map = new google.maps.Map(...)
于 2013-06-13T15:06:04.993 に答える