Карты Google отображаются неверно на мобильном телефоне

Question

Это следующий вопрос к вопросу дизайна Mark.
maps displayed wrong on mobile (using JQuery mobile)
Я новичок в javascript и jquery и не могу применять решения, представленные в ответах на вопрос Mark Design в приведенной выше ссылке на мой собственный скрипт карты Google. Я делаю то же самое, что и Марк Дизайн с этим файлом: http://skool411.info/m/Hawaii-2.html
На мобильных устройствах карты отображаются неправильно и выполняют то же самое, что показано на рисунках Mark Design, размещенных выше. Может кто-то здесь, пожалуйста, покажите мне, как применять «страницы» и «изменять размер»? Я также попытался отключить ajax, и это не сработало для меня: http://skool411.info/m/Hawaii-1.html
Скорее всего, я не знаю, как это сделать правильно. Если кто-то может показать мне, как отключить ajax, это тоже было бы здорово. Заранее большое спасибо.

Answer 1

У вас есть некоторые ошибки в calcRoute(), потому что в этом контексте у вас нет directionsService.

Во-первых, давайте map и Loc1 на "глобальном" контексте:

var map; 
var Loc1; 

Используя решение предлагаемого вопроса, необходимо создать карту, когда страница отображается:

функция

$('#mapPage').live('pageshow', 
     function(event, ui) { 
      var mapOptions = { 
       zoom : 7, 
       mapTypeId : google.maps.MapTypeId.ROADMAP, 
       center : Loc1 
      }; 

      map = new google.maps.Map(document.getElementById('map_canvas'), 
        mapOptions); 
     }); 

Initialize:

function initialize(Hlat1, Hlng1, Hlat2, Hlng2) { 
    Loc1 = new google.maps.LatLng(Hlat1, Hlng1); 

    var $content = $("#mapPage div:jqmData(role=content)"); 
    $content.height(screen.height); 
    $.mobile.changePage($("#mapPage")); 

    calcRoute(Hlat1, Hlng1, Hlat2, Hlng2); 
} 

И, наконец, вычислить ro Ют:

function calcRoute(Hlat1, Hlng1, Hlat2, Hlng2) { 
    var rendererOptions = { 
     draggable : true 
    }; 
    var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); 
    var directionsService = new google.maps.DirectionsService(); 

    var request = { 
     origin : new google.maps.LatLng(Hlat1, Hlng1), 
     destination : new google.maps.LatLng(Hlat2, Hlng2), 
     travelMode : google.maps.DirectionsTravelMode.DRIVING 
    }; 

    directionsService.route(request, function(response, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
      directionsDisplay.setDirections(response); 
      directionsDisplay.setMap(map); 
     } 
    }); 
} 

Here полный код.

Надеюсь, это поможет.