1

Thanks for any help you can provide! I have a webpage that is supposed to display multiple Google maps with driving directions and routes. However, I can only get one of the maps to load, and this map does not show the driving directions. I'm using Ruby on Rails to create the page.

Edit 3 Based on Carl's Comments

The start and end addresses appear correctly with my "@newmaps.each do" at the bottom. However, I was getting JS errors from the this.directionsDisplay and from this.directionsService so I moved both into a function initialize(). Still getting errors in the DirectionHelper.prototype.calcRoute

The error is, "ReferenceError: google is not defined" 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>

EARLIER VERSIONS

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

Sample JS results

    $(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.");
                  }


          });
        };

EDIT 1

Thanks to Carl for the attempt. The immediate solution didn't work, but maybe tweaking will help. The first thing I did was alter the Ruby code to fit my setup:

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

My immediate error in the console: DirectionHelper is not defined. I solved this by combining the Ruby javascript above with the Javascript for Google Maps.

Next error: newsavedmap is not defined. I tried solving this by replacing newsavedmap with <%= newsavedmap.WHATEVER %> and enclosing start, end, and waypoints within quotes. However, this just resulted in another error (a is null: somehow related to my Google Ads javascript, which should work just fine.) What should I do next? Is there a different approach I should take?

Edit 2

I've tried Carl's latest solution (thanks!) but ran into more errors. Here's my setup: I used his function DirectionHelper code and everything else in the top block exactly as-is. Then, in a separate tag specific to my "newmaps" view, I used the bottom Ruby code. It looks like this:

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

Notice that I used a constant for my waypoints since they were giving me a bunch of errors, which I wanted to separate from the javascript problems.

Now, I'm just giving a javascript error: newsavedmap is not defined. Any ideas?

4

1 回答 1

0

2013.08.15 好的，用所有 js、html、css 的完整示例更新我的答案。你可以自己填写ruby，这将是微不足道的。

代码也在 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 回答