10

私は自分のサイトに Google マップを埋め込もうとしてきましたが、あまり成功していません。次のコード セクションを使用しました: (自分のコンピューターで実際の API キーを使用しています)

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=myapikey&sensor=true">
</script>
<script type="text/javascript">
  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

<body>私が追加した内側のセクション<div id="map-canvas" style="width: 40%; height: 40%"></div>

どうすればこの問題を処理できますか? 前もって感謝します

4

2 に答える 2

20

キャンバスの幅と高さを ではなく絶対的な長さで指定します%。

例えば ​​：

<div id="map-canvas" style="width: 300px; height: 400px"></div>

または、キャンバスに固執し%ますが、幅と高さが絶対長として指定されたコンテナー内に配置します。

<div style="width:1000px; height:800px;">
    <div id="map-canvas" style="width: 40%; height: 40%"></div>
</div>
于 2013-03-29T10:45:32.920 に答える