Google지도가 모바일에 잘못 표시되었습니다.

Question

다음은 마크 디자인 질문에 대한 후속 질문입니다.
maps displayed wrong on mobile (using JQuery mobile)
나는 자바 스크립트와 jquery를 처음 사용하며 위의 마크 디자인 질문에 대한 답변에서 제공하는 솔루션을 내 Google지도 스크립트에 적용 할 수 없습니다. Mark Design이이 파일에서했던 것과 똑같은 일을하고 있습니다. http://skool411.info/m/Hawaii-2.html
모바일 장치에서지도가 올바르게 표시되지 않고 위의 그림과 같은 디자인이 표시됩니다. 여기 누군가가 '페이지 쇼'및 '크기 조정'을 적용하는 방법을 보여줄 수 있습니까? 나 또한 아약스를 끄려고했는데 그게 나를 위해 작동하지 않았다. http://skool411.info/m/Hawaii-1.html
나는 그 일을 올바르게하는 방법을 모른다. 만약 누군가가 나에게 아약스를 끄는 법을 보여줄 수 있다면 그것은 또한 위대 할 것이다. 대단히 감사드립니다.

Answer 1

이 컨텍스트에서 directionsService이 없기 때문에 calcRoute()에 약간의 오류가 있습니다. 페이지가 표시 될 때 제안 질문의 솔루션을 사용

이

var map; 
var Loc1; 

,지도를 만들 필요 :

먼저, map 및 "글로벌"상황에 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); 
     }); 

초기화 기능 :

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

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는 전체 코드입니다.

희망이 도움이됩니다.