如何从代码制作响应式谷歌地图
<div class="map">
<iframe>...</iframe>
</div>
我在 css 中使用完整的地图
.map{max-width:100%;}
和小型设备
.map{max-width:40%;}
但它没有用。
有人知道吗？谢谢你。
问问题
128805 次
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&source=s_q&hl=en&geocode=+&q=surat&ie=UTF8&hq=&hnear=Surat,+Gujarat&ll=21.195,72.819444&spn=0.36299,0.676346&t=m&z=11&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 回答
5
在 iframe 标签中，您可以轻松添加 width='100%' 而不是地图给您的预设值
像这样：
<iframe src="https://www.google.com/maps/embed?anyLocation" width="100%" height="400" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
于 2020-01-31T16:36:59.687 回答
3
检查此解决方案：http: //jsfiddle.net/panchroma/5AEEV/
不过，我不能把代码归功于代码，它来自快速简便的方法来使谷歌地图 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
我在 Foundation 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;}
于 2013-07-11T22:20:49.557 回答
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
使用 CSS 响应 您可以使用以下 CSS 代码使 Iframe 响应。
.map {
position: relative;
padding-bottom: 26.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.map iframe,
.map object,
.map embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
响应式 JavaScript
这可能通过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);
查看更多详细信息 - https://webomnizz.com/how-to-make-responsive-google-map-with-google-map-api/
于 2014-02-12T16:11:33.080 回答
0
我是一个业余爱好者，但我发现这很有效：
.maps iframe {
position: absolute;
}
body {
padding-top: 40px;
padding-bottom: 820px;
height: available;
}
底部可能有一点空白，但我很满意
于 2019-12-08T20:11:09.027 回答
0
我基于 eugenemail 回复的解决方案：
1. HTML - 谷歌地图 API
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
2. HTML - 画布
<div id="map_canvas"></div>
3. CSS - 地图画布
#map_canvas {
height: 400px;
}
4.JavaScript
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();
于 2017-04-28T10:42:24.853 回答