Как исправить ошибки в Google Maps Javascript API 3 mobile / Хабр

Встретился с серьезной проблемой при размещении на сайте карт от 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`а в % тоже идет не корректное отображение, решение данной проблемы очень тривиально и просто

<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>

Надеюсь данные советы помогут читателям быстро справится с проблемами отображения гугл карт на мобайл и на обычных устройствах.