我的响应[解决方案]基础4模式中的谷歌地图

Question

如何从代码中制作响应式谷歌地图

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

我在css中使用完整的地图

.map{max-width:100%;}

和小型设备

.map{max-width:40%;}

但它不起作用。

有人有想法吗？谢谢。

Answer 1

将此添加到初始化函数：

<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>

Answer 2

将 100％添加到其iframe的宽度和高度属性一直对我有用。例如

<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 />

Answer 3

没有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;
}

如果您有自定义地图尺寸，请删除＆＃34;身高：100％！important＆＃34;

Answer 4

使用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);

它处理调整大小事件并自动调整大小。

Answer 5

选中此解决方案：http://jsfiddle.net/panchroma/5AEEV/

虽然我不能把这个代码归功于它，它来自quick and easy way to make google maps iframe embed responsive。

祝你好运！

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>

Answer 6

这里有一个标准的CSS解决方案+ JS，用于调整地图的高度

CSS

#map_canvas {
   width: 100%;
}

JS

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

JsFiddle演示：http://jsfiddle.net/3VKQ8/33/

Answer 7

在iframe广告代码中，您可以轻松添加width ='100％'而不是地图提供的预设值

像这样：

 <iframe src="https://www.google.com/maps/embed?anyLocation" width="100%" height="400" frameborder="0" style="border:0;" allowfullscreen=""></iframe>

Answer 8

我认为最简单的方法是添加这个css，它会完美运行。

embed, object, iframe{max-width: 100%;}

Answer 9

我的响应[解决方案]基础4模式中的谷歌地图

<强> 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;}

Answer 10

这可以通过window.resize事件进行，您可以在谷歌地图上应用google.maps.event.addDomListener(window, 'resize', initialize);

考虑以下示例：

function initialize() {
    var mapOptions = {
           zoom: 9,
           center: new google.maps.LatLng(28.9285745, 77.09149350000007),  
           mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    var map = new google.maps.Map(document.getElementById('location-canvas'), mapOptions);
    var marker = new google.maps.Marker({
           map: map,
           draggable: false,
           position: new google.maps.LatLng(28.9285745, 77.09149350000007)
     });
}
google.maps.event.addDomListener(window, 'resize', initialize);
google.maps.event.addDomListener(window, 'load', initialize);

Answer 11

尝试使用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);

}

Answer 12

我的解决方案基于eugenemail响应：

<强> 1。 HTML - Google Maps API

Get API Key

<div id="map_canvas"></div>

<强> 2。 HTML - 画布

#map_canvas {
    height: 400px;
}

第3。 CSS - 地图画布

function initialize() {
    var lat = 40.759300;
    var lng = -73.985712;
    var map_center = new google.maps.LatLng(lat, lng);
    var mapOptions = {
        center: map_center,
        zoom: 16,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var mapCanvas = document.getElementById("map_canvas");
    var map = new google.maps.Map(mapCanvas, mapOptions);
    new google.maps.Marker({
        map: map,
        draggable: false,
        position: new google.maps.LatLng(lat, lng)
    });
    google.maps.event.addDomListener(window, 'resize', function() {
        map.setCenter(map_center);
    });
}
initialize();

<强> 4。的JavaScript

@echo off
set file=invoice.csv

REM get header:
set /p header=<%file%

REM process file line by line (ignore header):
for /f "skip=1 delims=" %%A in (%file%) do (
  for /f "tokens=2 delims=," %%B in ("%%A") do (
    if not exist "%%B.csv" echo %header%>"%%B.csv"
    >>"%%B.csv" echo %%A
  )
)

Answer 13

我是一个业余爱好者，但我发现这可行：

.maps iframe {
    position: absolute;
}

body {
    padding-top: 40px;
    padding-bottom: 820px;
    height: available;
}

底部可能会有一些空白，但我很满意

响应式谷歌地图？

13 个答案:

我的响应[解决方案]基础4模式中的谷歌地图