1

ご協力いただきありがとうございます。運転ルートとルートを含む複数の Google マップを表示する Web ページがあります。ただし、読み込むマップは 1 つしか取得できず、このマップには運転ルートが表示されません。Ruby on Rails を使用してページを作成しています。

カールのコメントに基づいて3を編集

開始アドレスと終了アドレスが正しく表示され、下部に「@newmaps.each do」が表示されます。ただし、this.directionsDisplay と this.directionsService から JS エラーが発生していたため、両方を関数 initialize() に移動しました。DirectionHelper.prototype.calcRoute で引き続きエラーが発生する

エラーは、「ReferenceError: google が定義されていません」 travelMode: google.maps.TravelMode.DRIVING です。

    <script type='text/javascript'>

    function DirectionHelper(id)
{
  var rendererOptions, chicago, mapOptions;
  this.directionsDisplay = null;
  this.id = id;
  this.map = null;


  rendererOptions = {
    draggable: true,
    panel:     document.getElementById('directions_panel' + this.id)
  };

  function initialize() {
  this.directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
  this.directionsService = new google.maps.DirectionsService();
  chicago = new google.maps.LatLng(41.850033, -87.6500523);

  mapOptions = {
    zoom: 6,
    center: chicago,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  this.map = new google.maps.Map(document.getElementById("map_canvas"+this.id), mapOptions);

  this.directionsDisplay.setMap(this.map);

  google.maps.event.addDomListener(window, 'load', initialize(this.map));
}
}
    DirectionHelper.prototype.calcRoute = function(start, end, waypoints){
      var request, 
          self = this;
      var request = {
          origin: start, // an address or LatLng
          destination: end, // an address or a LatLng
          optimizeWaypoints: optimize,
          travelMode: google.maps.TravelMode.DRIVING
      };

      this.directionsService.route(request, function(response, status) {
        var theRoute, summaryPanel;
        if (status == google.maps.DirectionsStatus.OK) {
          self.directionsDisplay.setDirections(response);

          theRoute = response.routes[0];
          summaryPanel = document.getElementById("directions_panel" + self.id);

          summaryPanel.innerHTML = "";
          // For each route, display summary information.
          for (var i = 0; i < theRoute.legs.length; i++) {
            var routeSegment = i+1;
            summaryPanel.innerHTML += "<b>Route Segment: " + routeSegment + "</b><br />";
            summaryPanel.innerHTML += theRoute.legs[i].start_address + " to ";
            summaryPanel.innerHTML += theRoute.legs[i].end_address + "<br />";
            summaryPanel.innerHTML += theRoute.legs[i].distance.text + "<br />";
            summaryPanel.innerHTML += theRoute.legs[i].duration.text + "<br /><br />";
          }
        }

        if(status == google.maps.DirectionsStatus.ZERO_RESULTS){
         alert("Error: One or more of your addresses was not found. If you think this is an error with our website, please contact us.");
        }
        if(status == google.maps.DirectionsStatus.MAX_WAYPOINTS_EXCEEDED){
          alert("Error: You have included more than eight stops along the way. Please use only eight or fewer stops, and try again.");
        }
        if(status == google.maps.DirectionsStatus.INVALID_REQUEST){
          alert("Error: You may be missing a starting or ending point, or you may have included two starting points or two ending points: one in the dropdown menu and one in the entry box. Please edit your map and try again.");
        }
        if(status == google.maps.DirectionsStatus.NOT_FOUND){
          alert("Error: One or more of your addresses was not found. If you think this is an error with our website, please contact us.");
        }
        if(status == google.maps.DirectionsStatus.OVER_QUERY_LIMIT){
         alert("We're sorry! This is an internal error with Go See Campus. Please contact us so we can resolve it.");
        }
        if(status == google.maps.DirectionsStatus.UNKNOWN_ERROR){
         alert("Error: Something went wrong when you loaded this page. Try loading the page again. You may need to log out, clear your temporary files, and log back in.");
        }
      });
    };

      var dirHelper = null;
      <% @newmaps.each do |newsavedmap| %>
      dirHelper = new DirectionHelper(<%= newsavedmap.id %>);
      <%= "dirHelper.calcRoute('#{newsavedmap.start}', '#{newsavedmap.end}');" %>
      <% end %>
    </script>

以前のバージョン

Javascript

    <script type='text/javascript'>
    <% for newsavedmap in @newmaps %>

    $(function(){

        var directionsDisplay<%= newsavedmap.id %>;
        var map<%= newsavedmap.id %>;           

        google.maps.event.addDomListener(window, 'load', initialize(map<%= newsavedmap.id %>));
    });

        var directionsService<%= newsavedmap.id %> = new google.maps.DirectionsService();


    function initialize() {
          var rendererOptions<%= newsavedmap.id %> = {
          draggable: true,
          panel:document.getElementById('directions_panel<%= newsavedmap.id %>')
         };

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

          directionsDisplay<%= newsavedmap.id %>.setMap(map<%= newsavedmap.id %>);
        }

        function calcRoute() {

          var request<%= newsavedmap.id %> = {
              origin: '<%= newsavedmap.start %>',
              destination: '<%= newsavedmap.end %>',
              waypoints: '<%= newsavedmap.waypoints %>',
              optimizeWaypoints: optimize,
              travelMode: google.maps.TravelMode.DRIVING
          };
          directionsService<%= newsavedmap.id %>.route<%= newsavedmap.id %>(request<%= newsavedmap.id %>, function(response<%= newsavedmap.id %>, status) {
            if (status == google.maps.DirectionsStatus.OK) {
              directionsDisplay<%= newsavedmap.id %>.setDirections(response<%= newsavedmap.id %>);
              var route<%= newsavedmap.id %> = response<%= newsavedmap.id %>.routes[0];
              var summaryPanel<%= newsavedmap.id %> = document.getElementById("directions_panel<%= newsavedmap.id %>");

              summaryPanel<%= newsavedmap.id %>.innerHTML = "";
              // For each route, display summary information.
              for (var i = 0; i < route<%= newsavedmap.id %>.legs.length; i++) {
                var routeSegment = i+1;
                summaryPanel<%= newsavedmap.id %>.innerHTML += "<b>Route Segment: " + routeSegment + "</b><br />";
                summaryPanel<%= newsavedmap.id %>.innerHTML += route<%= newsavedmap.id %>.legs[i].start_address + " to ";
                summaryPanel<%= newsavedmap.id %>.innerHTML += route<%= newsavedmap.id %>.legs[i].end_address + "<br />";
                summaryPanel<%= newsavedmap.id %>.innerHTML += route<%= newsavedmap.id %>.legs[i].distance.text + "<br />";
                summaryPanel<%= newsavedmap.id %>.innerHTML += route<%= newsavedmap.id %>.legs[i].duration.text + "<br /><br />";
              }
            }

                if(status == google.maps.DirectionsStatus.ZERO_RESULTS){
                 alert("Error: One or more of your addresses was not found. If you think this is an error with our website, please contact us.");
                 }
               if(status == google.maps.DirectionsStatus.MAX_WAYPOINTS_EXCEEDED){
               alert("Error: You have included more than eight stops along the way. Please use only eight or fewer stops, and try again.");
                }
               if(status == google.maps.DirectionsStatus.INVALID_REQUEST){
                alert("Error: You may be missing a starting or ending point, or you may have included two starting points or two ending points: one in the dropdown menu and one in the entry box. Please edit your map and try again.");
               }
               if(status == google.maps.DirectionsStatus.NOT_FOUND){
                alert("Error: One or more of your addresses was not found. If you think this is an error with our website, please contact us.");
                 }
               if(status == google.maps.DirectionsStatus.OVER_QUERY_LIMIT){
                 alert("We're sorry! This is an internal error with Go See Campus. Please contact us so we can resolve it.");
                 }
                 if(status == google.maps.DirectionsStatus.UNKNOWN_ERROR){
                 alert("Error: Something went wrong when you loaded this page. Try loading the page again. You may need to log out, clear your temporary files, and log back in.");
                  }


          });
        }; 
        <% end if @newmaps %>
    </script>

HTML

    <% for newsavedmap in @newmaps %>

    <div class="wholemap">
        <% if newsavedmap.name != nil and newsavedmap.name != '' %>
        <h4><%= newsavedmap.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<%= newsavedmap.id %>"></div>
    <div class="route" id="directions_panel<%= newsavedmap.id %>"></div>
    <div class="clear"></div>
    <a id="print<%= newsavedmap.id %>" target="_blank" class="printmap">Print this map</a>
    <div class="clear"></div> 
    </div>
<% end %>

JS の結果の例

    $(function(){
        var directionsDisplay6;
        var map6;           
        google.maps.event.addDomListener(window, 'load', initialize(map6));
    });

        var directionsService6 = new google.maps.DirectionsService();           

    function initialize() {
          var rendererOptions6 = {
          draggable: true,
          panel:document.getElementById('directions_panel6')
         };

          directionsDisplay6 = new google.maps.DirectionsRenderer(rendererOptions6);
          var chicago = new google.maps.LatLng(41.850033, -87.6500523);
              var mapOptions = {
              zoom: 6,
              center: chicago,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            }
          map6 = new google.maps.Map(document.getElementById("map_canvas6"), mapOptions);

          directionsDisplay6.setMap(map6);
        }

        function calcRoute() {

          var request6 = {
              origin: '2750 Pleasant Hill Rd Duluth, GA 30096',
              destination: '500 Lee Drive, Baton Rouge, Louisiana 70808',
              waypoints: '737 Denham Progress Rd Buckatunna, MS 39322',
              optimizeWaypoints: optimize,
              travelMode: google.maps.TravelMode.DRIVING
          };
          directionsService6.route6(request6, function(response6, status) {
            if (status == google.maps.DirectionsStatus.OK) {
              directionsDisplay6.setDirections(response6);
              var route6 = response6.routes[0];
              var summaryPanel6 = document.getElementById("directions_panel6");

              summaryPanel6.innerHTML = "";
              // For each route, display summary information.
              for (var i = 0; i < route6.legs.length; i++) {
                var routeSegment = i+1;
                summaryPanel6.innerHTML += "<b>Route Segment: " + routeSegment + "</b><br />";
                summaryPanel6.innerHTML += route6.legs[i].start_address + " to ";
                summaryPanel6.innerHTML += route6.legs[i].end_address + "<br />";
                summaryPanel6.innerHTML += route6.legs[i].distance.text + "<br />";
                summaryPanel6.innerHTML += route6.legs[i].duration.text + "<br /><br />";
              }
            }

                if(status == google.maps.DirectionsStatus.ZERO_RESULTS){
                 alert("Error: One or more of your addresses was not found. If you think this is an error with our website, please contact us.");
                 }
               if(status == google.maps.DirectionsStatus.MAX_WAYPOINTS_EXCEEDED){
               alert("Error: You have included more than eight stops along the way. Please use only eight or fewer stops, and try again.");
                }
               if(status == google.maps.DirectionsStatus.INVALID_REQUEST){
                alert("Error: You may be missing a starting or ending point, or you may have included two starting points or two ending points: one in the dropdown menu and one in the entry box. Please edit your map and try again.");
               }
               if(status == google.maps.DirectionsStatus.NOT_FOUND){
                alert("Error: One or more of your addresses was not found. If you think this is an error with our website, please contact us.");
                 }
               if(status == google.maps.DirectionsStatus.OVER_QUERY_LIMIT){
                 alert("We're sorry! This is an internal error with Go See Campus. Please contact us so we can resolve it.");
                 }
                 if(status == google.maps.DirectionsStatus.UNKNOWN_ERROR){
                 alert("Error: Something went wrong when you loaded this page. Try loading the page again. You may need to log out, clear your temporary files, and log back in.");
                  }


          });
        }; 


    $(function(){

        var directionsDisplay7;
        var map7;           

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

        var directionsService7 = new google.maps.DirectionsService();


    function initialize() {
          var rendererOptions7 = {
          draggable: true,
          panel:document.getElementById('directions_panel7')
         };

          directionsDisplay7 = new google.maps.DirectionsRenderer(rendererOptions7);
          var chicago = new google.maps.LatLng(41.850033, -87.6500523);
              var mapOptions = {
              zoom: 6,
              center: chicago,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            }
          map7 = new google.maps.Map(document.getElementById("map_canvas7"), mapOptions);

          directionsDisplay7.setMap(map7);
        }

        function calcRoute() {

          var request7 = {
              origin: '1600 Pennsylvania Avenue, Washington, DC 20500',
              destination: '103 Federal St Pittsburgh, PA 15212',
              waypoints: '50 Summit Ave Hagerstown, MD 21740',
              optimizeWaypoints: optimize,
              travelMode: google.maps.TravelMode.DRIVING
          };
          directionsService7.route7(request7, function(response7, status) {
            if (status == google.maps.DirectionsStatus.OK) {
              directionsDisplay7.setDirections(response7);
              var route7 = response7.routes[0];
              var summaryPanel7 = document.getElementById("directions_panel7");

              summaryPanel7.innerHTML = "";
              // For each route, display summary information.
              for (var i = 0; i < route7.legs.length; i++) {
                var routeSegment = i+1;
                summaryPanel7.innerHTML += "<b>Route Segment: " + routeSegment + "</b><br />";
                summaryPanel7.innerHTML += route7.legs[i].start_address + " to ";
                summaryPanel7.innerHTML += route7.legs[i].end_address + "<br />";
                summaryPanel7.innerHTML += route7.legs[i].distance.text + "<br />";
                summaryPanel7.innerHTML += route7.legs[i].duration.text + "<br /><br />";
              }
            }

                if(status == google.maps.DirectionsStatus.ZERO_RESULTS){
                 alert("Error: One or more of your addresses was not found. If you think this is an error with our website, please contact us.");
                 }
               if(status == google.maps.DirectionsStatus.MAX_WAYPOINTS_EXCEEDED){
               alert("Error: You have included more than eight stops along the way. Please use only eight or fewer stops, and try again.");
                }
               if(status == google.maps.DirectionsStatus.INVALID_REQUEST){
                alert("Error: You may be missing a starting or ending point, or you may have included two starting points or two ending points: one in the dropdown menu and one in the entry box. Please edit your map and try again.");
               }
               if(status == google.maps.DirectionsStatus.NOT_FOUND){
                alert("Error: One or more of your addresses was not found. If you think this is an error with our website, please contact us.");
                 }
               if(status == google.maps.DirectionsStatus.OVER_QUERY_LIMIT){
                 alert("We're sorry! This is an internal error with Go See Campus. Please contact us so we can resolve it.");
                 }
                 if(status == google.maps.DirectionsStatus.UNKNOWN_ERROR){
                 alert("Error: Something went wrong when you loaded this page. Try loading the page again. You may need to log out, clear your temporary files, and log back in.");
                  }


          });
        };

編集1

試みてくれたカールに感謝します。当面の解決策は機能しませんでしたが、微調整が役立つ場合があります。私が最初にしたことは、設定に合わせて Ruby コードを変更することでした。

    <script type="text/javascript">       
      var dirHelper = null;
      <% @newmaps.each do |newsavedmap| %>
        dirHelper = new DirectionHelper(newsavedmap.id);
        dirHelper.calcRoute(newsavedmap.start, newsavedmap.end, newsavedmap.waypoints);
      <% end %>
    </script>

コンソールですぐにエラーが発生しました: DirectionHelper が定義されていません。上記の Ruby JavaScript と Google Maps の Javascript を組み合わせることで、これを解決しました。

次のエラー: newsavedmap が定義されていません。newsavedmap を <%= newsavedmap.WHATEVER %> に置き換え、開始点、終了点、およびウェイポイントを引用符で囲むことで、これを解決しようとしました。ただし、これにより別のエラーが発生しました (a が null です: Google 広告 JavaScript に何らかの関連があり、正常に動作するはずです)。次に何をすればよいですか? 私が取るべき別のアプローチはありますか？

編集 2

Carl の最新のソリューションを試してみましたが (ありがとうございます!)、さらに多くのエラーが発生しました。これが私のセットアップです。私は彼の関数 DirectionHelper コードと、一番上のブロックの他のすべてをそのまま使用しました。次に、「newmaps」ビューに固有の別のタグで、一番下の Ruby コードを使用しました。次のようになります。

    <script type="text/javascript">
    var dirHelper = null;
      <% @newmaps.each do |newsavedmap| %>
        dirHelper = new DirectionHelper(newsavedmap.id);
    <%= "dirHelper.calcRoute('#{newsavedmap.start}', '#{newsavedmap.end}', '#{'5 Main Street Charlestown MA'}');" %>
    <% end %>
    </script>

ウェイポイントに定数を使用したことに注意してください。これは、javascript の問題から分離したかったエラーが多数発生していたためです。

今、私はJavaScriptエラーを出しています:newsavedmapが定義されていません。何か案は？

4

1 に答える 1

0

2013.08.15 すべての js、html、css の完全な例で回答を更新します。自分でルビを埋めることができますが、これは些細なことです。

コードは github にもあります。

HTML ページ:

<!doctype html>
<html>
<head>
  <title>multi directions</title>
  <link rel="stylesheet" href="site.css" type="text/css"/>
</head>
<body>
  <script type="text/javascript"  src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript" src="main.js"></script>  
</body>
</html>

CSS

.map{
  width:500px;
  height:300px;
  border: solid 1px #000;
  margin-bottom:10px;
}
.directions{
  width:500px;
  border: dashed 1px #000;
  margin-bottom: 10px;
}

JS

function DirectionHelper(id)
{
  var rendererOptions, chicago, mapOptions;
  this.directionsDisplay = null;
  this.id = id;
  this.map = null;
  this.directionsService = new google.maps.DirectionsService();

  var startElement = document.createElement('input');
  startElement.id = 'start_'+id;
  startElement.value = 'The Loop';
  document.body.appendChild(startElement);
  var endElement = document.createElement('input');
  endElement.id = 'end_'+id;
  endElement.value = 'Grant Park';
  document.body.appendChild(endElement);
  var mapElement = document.createElement('div');
  mapElement.id = "map_" + id;
  mapElement.className = 'map';
  document.body.appendChild(mapElement);
  var directionsPanelElement = document.createElement('div');
  directionsPanelElement.id = 'directions_panel'+id;
  directionsPanelElement.className='directions';
  document.body.appendChild(directionsPanelElement);

  rendererOptions = {
    draggable: true,
    panel:     document.getElementById('directions_panel' + this.id)
  };
  this.directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

  chicago = new google.maps.LatLng(41.850033, -87.6500523);

  mapOptions = {
    zoom: 6,
    center: chicago,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  this.map = new google.maps.Map(document.getElementById("map_"+this.id), mapOptions);
  this.directionsDisplay.setMap(this.map);
}
DirectionHelper.prototype.calcRoute = function(start, end, waypoints){
  var request, 
      self = this;
  request = {
    origin: start, // an address or LatLng
    destination: end, // an address or a LatLng
    travelMode: google.maps.TravelMode.DRIVING
  };
  console.log(request)
  this.directionsService.route(request,function(r,s){ console.log('shit') })
  this.directionsService.route(request, function(response, status) {
    var theRoute, summaryPanel;
    if (status == google.maps.DirectionsStatus.OK) {
      self.directionsDisplay.setDirections(response);

      theRoute = response.routes[0];
      summaryPanel = document.getElementById("directions_panel" + self.id);

      summaryPanel.innerHTML = "";
      // For each route, display summary information.
      for (var i = 0; i < theRoute.legs.length; i++) {
        var routeSegment = i+1;
        summaryPanel.innerHTML += "<b>Route Segment: " + routeSegment + "</b><br />";
        summaryPanel.innerHTML += theRoute.legs[i].start_address + " to ";
        summaryPanel.innerHTML += theRoute.legs[i].end_address + "<br />";
        summaryPanel.innerHTML += theRoute.legs[i].distance.text + "<br />";
        summaryPanel.innerHTML += theRoute.legs[i].duration.text + "<br /><br />";
      }
    }

    if(status == google.maps.DirectionsStatus.ZERO_RESULTS){
      alert("Error: One or more of your addresses was not found. If you think this is an error with our website, please contact us.");
    }
    if(status == google.maps.DirectionsStatus.MAX_WAYPOINTS_EXCEEDED){
      alert("Error: You have included more than eight stops along the way. Please use only eight or fewer stops, and try again.");
    }
    if(status == google.maps.DirectionsStatus.INVALID_REQUEST){
      alert("Error: You may be missing a starting or ending point, or you may have included two starting points or two ending points: one in the dropdown menu and one in the entry box. Please edit your map and try again.");
    }
    if(status == google.maps.DirectionsStatus.NOT_FOUND){
      alert("Error: One or more of your addresses was not found. If you think this is an error with our website, please contact us.");
    }
    if(status == google.maps.DirectionsStatus.OVER_QUERY_LIMIT){
      alert("We're sorry! This is an internal error with Go See Campus. Please contact us so we can resolve it.");
    }
    if(status == google.maps.DirectionsStatus.UNKNOWN_ERROR){
      alert("Error: Something went wrong when you loaded this page. Try loading the page again. You may need to log out, clear your temporary files, and log back in.");
    }
  });
};

function initialize() {  
  var dirHelper = null;
  for(var i=1; i<6; i++){
    dirHelper = new DirectionHelper(i);
    dirHelper.calcRoute(document.getElementById('start_'+i).value, document.getElementById('end_'+i).value);

  }
}
google.maps.event.addDomListener(window, 'load', initialize);
于 2013-07-28T06:52:31.063 に答える