Как сделать адаптивную карту Google из кодаОтзывчивая карта Google?
<div class="map">
<iframe>...</iframe>
</div>
я использую в CSS для полной карты
.map{max-width:100%;}
и небольшого устройства
.map{max-width:40%;}
, но это не сработало.
У кого-нибудь есть идея? Спасибо.
Проверить это для решения: 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>
Добавьте это в функцию инициализации:
<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>
Я не знаю, как это работает, но в любом случае вы получили мою хорошую калибровку. –
Если вы собираетесь использовать этот параметр, вы должны обернуть его в 'setTimemout', чтобы он не запускался непрерывно. например 'var resizeTimeout; google.maps.event.addDomListener (window, "resize", function() {if (resizeTimeout) {clearTimeout (resizeTimeout);} resizeTimeout = setTimeout (function() {/ * do resizing * /}, 250);}) ; ' – Walf
По какой-то причине, когда файл размера изменяется в функции setTimeout, он перестает работать. – Webars
я думаю, что самый простой способ будет добавить этот CSS и он будет работать пер ectly.
embed, object, iframe{max-width: 100%;}
Добавление 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 />
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;}
Посмотрите на эту ссылку Responsive Google Map, это возможно через window.resize событие, и вы можете применить это на карте Google, как 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);
, это приведет к утечке памяти, потому что нет способа утилизации элементов карты и маркера. Вы действительно должны использовать google.maps.event.trigger (карта, «изменить размер»); –
раствор без 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;
}
Если у вас есть пользовательский размер карты, не удалить "высота: 100% важно"
Это хорошее решение. Делайте iframe с 2600px; .google-maps {overflow-hiddem; ширина: 100%; } .google-maps iframe {left: 50%; margin-left: -1300px} Отклонитесь от идеи –
Пробовал с помощью 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);
}
Здесь стандартный CSS решение + JS для высоты карты содержат в изменении размеров
CSS
#map_canvas {
width: 100%;
}
JS
// On Resize
$(window).resize(function(){
$('#map_canvas').height($(window).height());
JsFiddle демо: http://jsfiddle.net/3VKQ8/33/
Лучше использовать API карт Google. Я создал пример здесь: 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);
Он обрабатывает изменения размера события и автоматически регулирует размер.
Ваш пример хороший. Было бы лучше, если бы вы могли изменять размер без необходимости хранить 'path_bounds', потому что в моем случае очень сложно управлять' path_bounds' – ihimv
Мое решение основано на реакции eugenemail:
1.HTML - Google Maps 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();
Я искал какое-то время, чтобы получить это решение, по-видимому GoogleMaps не нравится, если и ширина и высота в процентах. Но ваше решение действительно работает, так или иначе! cheers – Martin