44

コードからレスポンシブ Google マップを作成する方法

<div class="map">
    <iframe>...</iframe>
</div>

フルマップのCSSで使用します

.map{max-width:100%;}

と小さなデバイス

.map{max-width:40%;}

しかし、うまくいきませんでした。

誰でもアイデアがありますか？ありがとうございました。

4

13 に答える 13

67

これを初期化関数に追加します。

<script type="text/javascript">

function initialize() {

  var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

  // Resize stuff...
  google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center); 
  });

}

</script>
于 2013-03-30T13:18:20.783 に答える
60

その iframe の幅と高さの属性に100%を追加すると、常にうまくいきました。例えば

<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.in/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=+&amp;q=surat&amp;ie=UTF8&amp;hq=&amp;hnear=Surat,+Gujarat&amp;ll=21.195,72.819444&amp;spn=0.36299,0.676346&amp;t=m&amp;z=11&amp;output=embed"></iframe><br />
于 2013-05-28T06:19:30.910 に答える
27

JavaScript を使用しないソリューション:

HTML:

<div class="google-maps">
<iframe>........//Google Maps Code//..........</iframe>
</div>

CSS:

.google-maps {
    position: relative;
    padding-bottom: 75%; // This is the aspect ratio
    height: 0;
    overflow: hidden;
}
.google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

カスタム マップ サイズがある場合は、「height: 100% !important」を削除します。

于 2014-03-26T11:10:35.293 に答える
9

Google Map API を使用することをお勧めします。ここに例を作成しました: http://jsfiddle.net/eugenebolotin/8m1s69e5/1/

主な機能は、関数の使用です。

//Full example is here: http://jsfiddle.net/eugenebolotin/8m1s69e5/1/

map.setCenter(map_center);
// Scale map to fit specified points
map.fitBounds(path_bounds);

サイズ変更イベントを処理し、サイズを自動的に調整します。

于 2015-12-04T16:20:54.423 に答える
3

解決策については、これを確認してください: http://jsfiddle.net/panchroma/5AEEV/

私はコードの功績を認めることはできませんが、Google マップの iframe 埋め込みをレスポンシブにするための迅速かつ簡単な方法から来ています。

幸運を！

CSS 

#map_canvas{
width:50%;
height:300px !important;
}

HTML

    <!DOCTYPE html>
<html>
  <head>
    <title>Google Maps JavaScript API v3 Example: Map Simple</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
    <meta charset="utf-8"/>
    <style>
      html, body, #map_canvas {
        margin: 0;
        padding: 0;
        height: 100%;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
      var map;
      function initialize() {
        var mapOptions = {
          zoom: 8,
          center: new google.maps.LatLng(-34.397, 150.644),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map_canvas'),
            mapOptions);
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map_canvas"></div>
  </body>
</html>
于 2013-03-15T01:33:16.290 に答える
2

ここでは、マップの高さを変更するための標準的な CSS ソリューション + JS を示します。

CSS

#map_canvas {
   width: 100%;
}

JS

// On Resize
$(window).resize(function(){ 
    $('#map_canvas').height($( window ).height());

JsFiddle デモ: http://jsfiddle.net/3VKQ8/33/

于 2015-07-31T08:19:52.553 に答える
1

最も簡単な方法は、この css を追加することであり、完全に機能すると思います。

embed, object, iframe{max-width: 100%;}
于 2013-04-12T07:54:08.717 に答える
0

CSS で試してみましたが、100% 応答しないため、純粋な JavaScript ソリューションを構築しました。これはjQueryを使用し、

google.maps.event.addDomListener(window, "resize", function() {

  var center = map.getCenter();

  resizeMap();

  google.maps.event.trigger(map, "resize");
  map.setCenter(center);

});



function resizeMap(){

  var h = window.innerHeight;
  var w = window.innerWidth;

  $("#map_canvas").width(w/2);
  $("#map_canvas").height(h-50);

}
于 2015-04-14T13:23:27.757 に答える
0

私のレスポンシブ [解決策] Foundation 4 Modal の Google マップ

JS

次のコードで外部 JavaScript ファイル (つまり mymap.js) を作成します。

google.maps.visualRefresh = true; //Optional

var respMap;

function mymapini() {
    var mapPos = new google.maps.LatLng(-0.172175,1.5); //Set the coordinates
    var mapOpts = {
    zoom: 10, //You can change this according your needs
    disableDefaultUI: true, //Disabling UI Controls (Optional)
    center: mapPos, //Center the map according coordinates
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    respMap = new google.maps.Map(document.getElementById('mymap'),
      mapOpts);

    var mapMarker = new google.maps.Marker({
          position: mapPos,
          map: respMap,
          title: 'You can put any title'
      });

    //This centers automatically to the marker even if you resize your window
    google.maps.event.addListener(respMap, 'idle', function() {
    window.setTimeout(function() {
      respMap.panTo(mapPos.getPosition());
    }, 250);    
  });
}

google.maps.event.addDomListener(window, 'load', mymapini);

$("#modalOpen").click(function(){ //Use it like <a href="#" id="modalOpen"...
    $("#myModal").show(); //ID from the Modal <div id="myModal">...
    google.maps.event.trigger(respMap, 'resize');
});

HTML

タグの前に次のコードを追加します。

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="js/mymap.js"></script>

これをモーダル コードに追加します。

<div id="mymap"></div>

CSS

これをスタイルシートに追加します。

#mymap { margin: 0; padding: 0; width:100%; height: 400px;}
于 2013-07-11T22:20:49.557 に答える