#javascript #ipad #google-maps #google-maps-api-3
#javascript #iPad #google-карты #google-maps-api-3
Вопрос:
Я работаю над веб-приложением для iPad, которое использует API Google Maps версии v3.5, и столкнулся с проблемой. Я подозреваю, что это ошибка в api, но я надеюсь получить ее подтверждение здесь, прежде чем я ее удалю. Загрузка страницы в альбомном или портретном режиме выполняется без сбоев, но если я переключаюсь с изображения на альбомную ориентацию, кнопки в правом верхнем углу или выводятся за пределы экрана. Мне кажется, что разрешение экрана не изменилось. Вроде как страница, на которой она сама увеличена.
К сожалению, мне не разрешено делиться веб-адресом, но кто-нибудь еще сталкивался с этим раньше? И есть ли решение?
Знаю, что это сложно только с фрагментами, но … это из заголовка, чтобы остановить пользователя от любого забавного занятия:
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
И это из тела, в котором будет находиться карта.
<div id="map_canvas" style="width: 100%; height: 100%"></div>
И это из javscript, который отображает карту:
var myLatlng = new google.maps.LatLng(56.668142,16.341105);
// Start settings for the map
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Creating and displaying the map
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
Я смог повторно вызвать ошибку только с помощью этого вызова Google api в отношении отображения чего-либо на веб-странице.
Комментарии:
1. Трудно сказать, поскольку я не вижу страницу. Но это может быть проблемой css. Проверьте, как указаны размеры области карты. Вы можете попробовать привязать событие изменения размера и изменить размер области карты в соответствии с текущим значением.
2. @Tomik Я добавил немного кода. Это должен быть единственный код, имеющий отношение к проблеме, но я, возможно, что-то пропустил.
Ответ №1:
Попробуйте использовать этот мета-тег вместо:
<meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />