Встретился с серьезной проблемой при размещении на сайте карт от Google Maps, а именно не отображение/не полное отображение карты после загрузки страницы, заметил что тем таких много, а ответов крайне мало, и то, если вы любитель поискать ответы где-то в глубинке форумов, ниже я приведу несколько вариантов решение данных проблем с кодом инициализаций, так что устройтесь поудобней с попкорном и приступайте к чтению
Весь секрет в function loadScript() а также в window.onload который нужно разместить именно ЗА $.mobile.changePage. new google.maps.LatLng — не забываем именно так написать, потому как по другому гугл не поймет что вы от него вообще хочете(изменения для работы с javascript google api v3). Как вы заметили я 2 раза написал window.onload, хотя функция должна выполнятся 1 раз, но при работе с гугл картами почему-то именно 2 раза window.onload спасли меня, не знаю в чем дело, но работает!
Еще один момент, не знаю почему, но при определении размеров div`а в % тоже идет не корректное отображение, решение данной проблемы очень тривиально и просто
Где map_canvas — контейнер в котором отображается наша карта.
Следующая проблема связана с геолокацией гугла, таже проблема, прорисовка карты, ниже привожу полный пример с решением
Решение данной проблемы в этих строках
и опять же нельзя задавать высоту div`а где будет отображаться ваша карта в %.
Это рекомендации которые помогли настроить одинаковое отображение как на планшетных/мобильных так и на стационарных устройствах. Хотя в офф. документации к Javascript google API 3 написаны все примеры с размерами в %, на деле же — головная боль.
Еще одна проблема решение которой я не нашел — отображение элементов управления, они на одних картах пропадают а на других отображаются нормально, вся разница в страницах, код одинаковый, в чем баг так пока и не нашел.
Начальник подсказал интересное решение, на практике помогло, код ниже
и блок карты с обязательным классом
Надеюсь данные советы помогут читателям быстро справится с проблемами отображения гугл карт на мобайл и на обычных устройствах.
//google maps Api
$("#companyform_showonmap_page").click(function(){
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 17,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
timeout: 6000,
maximumAge: 50000,
enableHighAccuracy:true
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
/* if ((company.getcompanygpslalo(gpslalo)!=0) && (company.getcompanygpslalo(gpslalo)!= null)){
map.setCenter(company.getcompanygpslalo(gpslalo));
// console.log(results[0].geometry.location.Ua); проверка данных через фаербаг
// console.log(results[0].geometry.location.Va);
var marker = new google.maps.Marker({
map: map,
position: company.getcompanygpslalo(gpslalo)
});
}else{*/
function codeAddress() {
var address = document.getElementById("address").value;
var gps = company.getgpslalo(); // мой обьект в который я передаю кооры с БД
geocoder.geocode( { 'address': $("#companyform_gpscoords").val()}, function(results, status) {
//тут я отдаю геокодеру все что записано в adress инпуте в формате JSON на поиск
console.log(company.getgpslalo(gps));
console.log(gps.la);
console.log(gps.lo);
if ((gps.la)>0 &&(gps.la)>0)
{
map.setCenter(new google.maps.LatLng((gps.la),(gps.lo)));
pos = new google.maps.LatLng((gps.la),(gps.lo));
// console.log(results[0].geometry.location.Ua); проверка данных с геодаты гугла
// console.log(results[0].geometry.location.Va);
var marker = new google.maps.Marker({
map: map,
position: pos
});
} else {
//в этом месте я не найдя данных в БД перешел к поиску по input'у address
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
// console.log(results[0].geometry.location.Ua); проверка данных с геодаты гугла
// console.log(results[0].geometry.location.Va);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Геокодирование не было успешным по следующим причинам: " + status);
}
//company.getcompanycoordinats(results[0].geometry.location.Ua,results[0].geometry.location.Va); ловит геокодированные координаты от гугля
}
});
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps/api/js?sensor=true&callback;=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
$.mobile.changePage("#companyform_showonmap_page");
window.onload = initialize();
window.onload = codeAddress();
});
Весь секрет в function loadScript() а также в window.onload который нужно разместить именно ЗА $.mobile.changePage. new google.maps.LatLng — не забываем именно так написать, потому как по другому гугл не поймет что вы от него вообще хочете(изменения для работы с javascript google api v3). Как вы заметили я 2 раза написал window.onload, хотя функция должна выполнятся 1 раз, но при работе с гугл картами почему-то именно 2 раза window.onload спасли меня, не знаю в чем дело, но работает!
Еще один момент, не знаю почему, но при определении размеров div`а в % тоже идет не корректное отображение, решение данной проблемы очень тривиально и просто
<div id="map_canvas" style="width: 100%; height: 500px; position:center;" ></div>
Где map_canvas — контейнер в котором отображается наша карта.
Следующая проблема связана с геолокацией гугла, таже проблема, прорисовка карты, ниже привожу полный пример с решением
$( "#map-page" ).live( "pageshow", function()
var defaultLatLng = new google.maps.LatLng(37.530073, 15.112151);
if ( navigator.geolocation )
{
function success(pos)
{
// Location found, show coordinates on map
drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
}
function fail()
{
drawMap(defaultLatLng); // Show default map
}
// Find users current position
navigator.geolocation.getCurrentPosition(success, fail, {enableHighAccuracy:true, timeout: 6000, maximumAge: 50000 });
}
else
{
drawMap(defaultLatLng); // No geolocation support
}
function drawMap(latlng) {
var myOptions = {
zoom: 17,
center: latlng,
zoomControl: true,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(
document.getElementById("map-canvas"), myOptions);
// Add an overlay to the map of current lat/lng
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: "Вы находитесь тут!"
});
}
});
Решение данной проблемы в этих строках
{enableHighAccuracy:true, timeout: 6000, maximumAge: 50000 }и опять же нельзя задавать высоту div`а где будет отображаться ваша карта в %.
Это рекомендации которые помогли настроить одинаковое отображение как на планшетных/мобильных так и на стационарных устройствах. Хотя в офф. документации к Javascript google API 3 написаны все примеры с размерами в %, на деле же — головная боль.
Еще одна проблема решение которой я не нашел — отображение элементов управления, они на одних картах пропадают а на других отображаются нормально, вся разница в страницах, код одинаковый, в чем баг так пока и не нашел.
Начальник подсказал интересное решение, на практике помогло, код ниже
//функция Jquery которая определяет высоту документа и окна, через алерт можно его проверить
$.getDocHeight = function(){
return Math.max(
$(document).height(),
$(window).height(),
/* For opera: */
document.documentElement.clientHeight
);
};
//alert( $.getDocHeight() );
$(".googlemap").height($.getDocHeight()-10); //ищем классы googlemap и устанавливаем значение высоты карты
$(".googlemap").width("98%");// тут мы просто проставляем googlemap`у ширину
и блок карты с обязательным классом
<div id="map_canvas" class="googlemap" style="position:center" ></div>
Надеюсь данные советы помогут читателям быстро справится с проблемами отображения гугл карт на мобайл и на обычных устройствах.