Ruby on Rails 앱용 Google Maps API V2를 V3로 변환

-1

도움을 주셔서 감사합니다!Ruby on Rails 앱용 Google Maps API V2를 V3로 변환

요약 요약 Google지도 API V2지도 애플리케이션이 Ruby on Rails에 내장되어 있으며 V3로 변환하려고합니다. Tips for Upgrading Gmaps v2 to v3 more quickly의 조언을 사용하여 기존 자바 스크립트를 업데이트했습니다. 그러나 내지도는 여전히 페이지에 표시되지 않습니다.

세부 정보 : V2를 사용하면이 코드는 단일 웹 페이지에 일련의 고유 한 점 A에서 점 B 로의 맵을 표시합니다. 사용자는 많은 저장된지도를 가질 수 있으며이 코드는지도를 표시합니다. 이제지도 캔버스와 경로가 해결되지 않습니다.

다시 한 번 도움을 주시면 감사하겠습니다.

편집 3 : 문제가 calcRoute이다()

내가 모든 것을보고 내가 시작 및 종료 변수에 추가하기 시작할 때까지지도가 작동하는지 알아 낸. 이 변수는 작동해야하지만, 경로와 경로는 나타나지 않습니다. 이 변수들을 로딩 할 때 내가 잘못하고있는 것이 있습니까? 원래 js와 결과를 모두 제공했습니다.

원본 :

이

function calcRoute() { 
var start = <%= savedmap.from %>; 
var end = <%= savedmap.to %>; 
var request = { 
origin:start, 
destination:end, 
travelMode: google.maps.DirectionsTravelMode.DRIVING 
}; 
directionsService.route(request, function(response, status) { 
if (status == google.maps.DirectionsStatus.OK) { 
directionsDisplay.setDirections(response); 
} 
}); 
}

결과 :

function calcRoute() { 
var start = 4400 Massachusetts Ave NW Washington, District of Columbia, 20016-8001; 
var end = 2121 I Street- NW Washington, District of Columbia, 20052; 
var request = { 
origin:start, 
destination:end, 
travelMode: google.maps.DirectionsTravelMode.DRIVING 
}; 
directionsService.route(request, function(response, status) { 
if (status == google.maps.DirectionsStatus.OK) { 
directionsDisplay.setDirections(response); 
} 
}); 
}

편집 2 : 요청으로

게시 결과, 나는 여기에 나열된 스크립트를 사용할 때 발생하는 결과입니다 편집 1

<head> 
<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY&sensor=false"></script> 
     <script type="text/javascript"> 

     var directionsDisplay7656; 
     var directionsService7656 = new google.maps.DirectionsService(); 
     var map7656; 

     function initialize() { 
     directionsDisplay7656 = new google.maps.DirectionsRenderer(); 
     var chicago = new google.maps.LatLng(41.850033, -87.6500523); 
     var mapOptions = { 
      zoom:7, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      center: chicago 
     } 
     map7656 = new google.maps.Map(document.getElementById("map_canvas7656"), mapOptions); 
     directionsDisplay7656.setMap(map7656); 
     } 

     function calcRoute() { 
     var start = 350 5th Ave New York, NY 10118; 
     var end = 2 Lincoln Memorial Cir Washington, DC 20037; 
     var request = { 
      origin:start, 
      destination:end, 
      travelMode: google.maps.DirectionsTravelMode.DRIVING 
     }; 
     directionsService7656.route(request, function(response, status) { 
      if (status == google.maps.DirectionsStatus.OK) { 
      directionsDisplay7656.setDirections(response); 
      } 
     }); 
     } 

     </script> 
</head> 
<body id="itineraries" 
onload="initialize()"> 

<input id="auth_token" class="hidden" name="" type="hidden" value="VALUEHERE=" /> 
<div class="wholemap"> 
<h4>test</h4> 

    <div class="map" id="map_canvas7656"></div> 
    <div class="route" id="route7656"></div> 
    <div class="clear"></div> 
    <a id="print7656" target="_blank" class="printmap">Print this map</a> 
    <a class="removemap" href="/savedmaps/7656">Delete this map</a> 
    <div class="clear"></div> 
    </div> 
</body

편집 1 : 두 번째 시도

이번에는 구글에서 길 예제를 시작했다. 운이 없다, 불행히도.

<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY&sensor=false"></script> 
<script type="text/javascript"> 
    <% for savedmap in @maps %> 
     var directionsDisplay<%= savedmap.id %>; 
     var directionsService<%= savedmap.id %> = new google.maps.DirectionsService(); 
     var map<%= savedmap.id %>; 

     function initialize() { 
     directionsDisplay<%= savedmap.id %> = new google.maps.DirectionsRenderer(); 
     var chicago = new google.maps.LatLng(41.850033, -87.6500523); 
     var mapOptions = { 
      zoom:7, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      center: chicago 
     } 
     map<%= savedmap.id %> = new google.maps.Map(document.getElementById("map_canvas<%= savedmap.id %>"), mapOptions); 
     directionsDisplay<%= savedmap.id %>.setMap(map<%= savedmap.id %>); 
     } 

     function calcRoute() { 
     var start = <%= savedmap.from%>; 
     var end = <%= savedmap.to %>; 
     var request = { 
      origin:start, 
      destination:end, 
      travelMode: google.maps.DirectionsTravelMode.DRIVING 
     }; 
     directionsService<%= savedmap.id %>.route(request, function(response, status) { 
      if (status == google.maps.DirectionsStatus.OK) { 
      directionsDisplay<%= savedmap.id %>.setDirections(response); 
      } 
     }); 
     } 
    <% end %> 
     </script>

위의 버전은 최신 버전입니다.

<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY&sensor=false"></script> 
    <script type="text/javascript"> 

    <% for savedmap in @maps %> 
     var map<%= savedmap.id %>; 
     var resultx<%= savedmap.id %>; 
     var directionsPanel<%= savedmap.id %>; 
     var directions<%= savedmap.id %>; 
    <% end %> 
     function initialize() { 
      var marker = new google.maps.marker(new google.maps.LatLng(-30.368374, -71.089182)); //initialize a marker out in the middle of nowhere 
      google.maps.event.addListener(marker, 'click', function() { 
      }); 
      <% for savedmap in @maps %> 
       map<%= savedmap.id %> = new google.maps.Map(document.getElementById("map_canvas<%= savedmap.id %>")); 
       map<%= savedmap.id %>.setCenter(new google.maps.LatLng(42.351505,-71.094455), 15); 
       directionsPanel<%= savedmap.id %> = document.getElementById("route<%= savedmap.id %>"); 
       directions<%= savedmap.id %> = new google.maps.directions(map<%= savedmap.id %>, directionsPanel<%= savedmap.id %>); 
       directions<%= savedmap.id %>.load("from: <%= savedmap.from %> to: <%= savedmap.to %>"); 
       //google.maps.event.addListener(directions<%= savedmap.id %>, "error", handleErrors); 

       map<%= savedmap.id %>.addOverlay(marker); 
       map<%= savedmap.id %>.addControl(new google.maps.SmallMapControl()); 
       map<%= savedmap.id %>.addControl(new google.maps.MapTypeControl()); 
       $('a#print<%= savedmap.id %>').attr('href', 'http://maps.google.com/maps?f=q&q=from: <%= savedmap.from %> to: <%= savedmap.to %>&t=h&z=13&layer=c&pw=2')      
      <% end %> 
      } 
     /*function handleErrors(){ 
       if (directions<%= savedmap.id %>.getStatus().code == G_GEO_UNKNOWN_ADDRESS) 

       alert("No corresponding geographic location could be found for one of the specified addresses. This may be due to the fact that the address is relatively new, or it may be incorrect.\nError code: " + directions<%= savedmap.id %>.getStatus().code); 
       else if (directions<%= savedmap.id %>.getStatus().code == G_GEO_SERVER_ERROR) 
       alert("A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known.\n Error code: " + directions<%= savedmap.id %>.getStatus().code); 

       else if (directions<%= savedmap.id %>.getStatus().code == G_GEO_MISSING_QUERY) 
       alert("The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.\n Error code: " + gdir.getStatus().code); 

      // else if (gdir.getStatus().code == G_UNAVAILABLE_ADDRESS) <--- Doc bug... this is either not defined, or Doc is wrong 
      //  alert("The geocode for the given address or the route for the given directions query cannot be returned due to legal or contractual reasons.\n Error code: " + gdir.getStatus().code); 

       else if (directions<%= savedmap.id %>.getStatus().code == G_GEO_BAD_KEY) 
       alert("The given key is either invalid or does not match the domain for which it was given. \n Error code: " + directions<%= savedmap.id %>.getStatus().code); 

       else if (directions<%= savedmap.id %>.getStatus().code == G_GEO_BAD_REQUEST) 
       alert("A directions request could not be successfully parsed.\n Error code: " + directions<%= savedmap.id %>.getStatus().code); 

       else alert("An unknown error occurred."); 

      } */ 
     </script>

Maps.html.erb 코드

<% for savedmap in @maps %> 

    <div class="wholemap"> 
     <% if savedmap.name != nil and savedmap.name != '' %> 
     <h4><%= savedmap.name %></h4> 
     <% else %> 
     <h4>Untitled Map</h4> 
     <% end %> 
     <a class="directions" href="#">Show Driving Directions</a> 
    <div class="clear"></div> 
    <div class="map" id="map_canvas<%= savedmap.id %>"></div> 
    <div class="route" id="route<%= savedmap.id %>"></div> 
    <div class="clear"></div> 
    <a id="print<%= savedmap.id %>" target="_blank" class="printmap">Print this map</a> 
    <a class="removemap" href="/savedmaps/<%= savedmap.id %>">Delete this map</a> 
    <div class="clear"></div> 
    </div> 
<% end %>

아직이 여행에 대한지도를 추가하지 않은 : ORIGINAL CODE POST는

자바 스크립트를 따른다.

1)에서는이 API는 다른 참조하는 방법 v3에서

출처

2013-03-18 KDP

난 당신이 몇 가지가 여기에가는 것 같아요. 그것은 이런 식이어야합니다.

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

2) 초기화 기능이 있지만 onload와 같이 어디에서나 호출 할 수는 없습니다.

google.maps.event.addDomListener(window, 'load', initialize);

3)지도의 가장 옵션 배열을 설정하려고하는 방법 당신 설정이 전달된다. 마커를 들어

var mapOptions = { 
    zoom: 8, 
    center: new google.maps.LatLng(-30.368374, -71.089182), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
map1 = new google.maps.Map(document.getElementById("map_canvas1"), mapOptions);

4) 이런 식을 설정하려고합니다.

var marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(-30.368374, -71.089182), 
    map: map1, 
    title: 'Hello World!' 
}); 
google.maps.event.addListener(marker, 'click', function() { 
    alert('here'); 
});

Maps API 예제 페이지 (https://developers.google.com/maps/documentation/javascript/examples/)를 살펴보십시오. 나는 이것이 당신을 곧게해야한다고 생각합니다.

Ruby 코드없이 작동 시키면 문제가 해결됩니다. Javascript를 먼저 가지고 다음에 단일 맵이 작동하면 Ruby를 다시 추가하십시오. Ruby 코드를 모두 제거하고 위에서 언급 한 몇 가지 변경 사항과 함께 마커가 표시된 맵을 얻었습니다.

--Chris

출처

2013-03-18 01:33:09

Chris, 답장을 보내 주셔서 감사합니다. 실제로 지침 예제로 시작하여 Ruby를 천천히 추가함으로써 진행 방식을 시도했습니다. 불행히도, 그것을 버리는 첫 번째 것은'var start = <% = savedmap.from %>'와'var end = <% = savedmap.to %> '를 추가 할 때입니다. HTML로 인쇄 해 보았으므로이 필드는 내 데이터를 순환 할 것입니다. 그러나 어떤 이유로 V3 V3 JavaScript는 허용되지 않습니다. 나는 최신 버전을 게시했다. 제공 할 수있는 도움에 감사드립니다! – KDP

Ruby가 HTML을 처리 한 후 HTML을 게시 할 수 있습니까? Google Maps는 자바 측에 있기 때문에 서버 측 스크립트 (Ruby)가 필요로하는 것을 뱉어 내면 디버그하기가 더 쉽습니다. 이 시점에서 우리는 Javascript만을 다루고 있습니다 (Ruby가 문제를 일으키는 경우). –

죄송합니다, Chris, 지금 프로젝트에 백업되었습니다. 최대한 빨리 돌아올 것입니다. – KDP

Ruby on Rails 앱용 Google Maps API V2를 V3로 변환

답변

관련 문제