Встретился с серьезной проблемой при размещении на сайте карт от Google Maps, а именно не отображение/не полное отображение карты после загрузки страницы, заметил что тем таких много, а ответов крайне мало, и то, если вы любитель поискать ответы где-то в глубинке форумов, ниже я приведу несколько вариантов решение данных проблем с кодом инициализаций, так что устройтесь поудобней с попкорном и приступайте к чтению
//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`а в % тоже идет не корректное отображение, решение данной проблемы очень тривиально и просто
id="map_canvas" style="width: 100%; height: 500px; position:center;"
Где 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`а где будет отображаться ваша карта в %.
Надеюсь данные советы помогут читателям быстро справится с проблемами отображения гугл карт на мобайл и на обычных устройствах.
Автор: GrandMaster
