Databases
StackOverflow2013
Postsdbo
POHow can I create multiple Google Maps with driving directions on the same page?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can I create multiple Google Maps with driving directions on the same page?
    primarykey
    data
    text
    <p>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.</p> <p><strong>Edit 3 Based on Carl's Comments</strong></p> <p>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</p> <p>The error is, "ReferenceError: google is not defined" travelMode: google.maps.TravelMode.DRIVING</p> <pre><code> &lt;script type='text/javascript'&gt; 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 &lt; theRoute.legs.length; i++) { var routeSegment = i+1; summaryPanel.innerHTML += "&lt;b&gt;Route Segment: " + routeSegment + "&lt;/b&gt;&lt;br /&gt;"; summaryPanel.innerHTML += theRoute.legs[i].start_address + " to "; summaryPanel.innerHTML += theRoute.legs[i].end_address + "&lt;br /&gt;"; summaryPanel.innerHTML += theRoute.legs[i].distance.text + "&lt;br /&gt;"; summaryPanel.innerHTML += theRoute.legs[i].duration.text + "&lt;br /&gt;&lt;br /&gt;"; } } 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; &lt;% @newmaps.each do |newsavedmap| %&gt; dirHelper = new DirectionHelper(&lt;%= newsavedmap.id %&gt;); &lt;%= "dirHelper.calcRoute('#{newsavedmap.start}', '#{newsavedmap.end}');" %&gt; &lt;% end %&gt; &lt;/script&gt; </code></pre> <p><strong>EARLIER VERSIONS</strong></p> <p><strong>Javascript</strong></p> <pre><code> &lt;script type='text/javascript'&gt; &lt;% for newsavedmap in @newmaps %&gt; $(function(){ var directionsDisplay&lt;%= newsavedmap.id %&gt;; var map&lt;%= newsavedmap.id %&gt;; google.maps.event.addDomListener(window, 'load', initialize(map&lt;%= newsavedmap.id %&gt;)); }); var directionsService&lt;%= newsavedmap.id %&gt; = new google.maps.DirectionsService(); function initialize() { var rendererOptions&lt;%= newsavedmap.id %&gt; = { draggable: true, panel:document.getElementById('directions_panel&lt;%= newsavedmap.id %&gt;') }; directionsDisplay&lt;%= newsavedmap.id %&gt; = new google.maps.DirectionsRenderer(rendererOptions&lt;%= newsavedmap.id %&gt;); var chicago = new google.maps.LatLng(41.850033, -87.6500523); var mapOptions = { zoom: 6, center: chicago, mapTypeId: google.maps.MapTypeId.ROADMAP } map&lt;%= newsavedmap.id %&gt; = new google.maps.Map(document.getElementById("map_canvas&lt;%= newsavedmap.id %&gt;"), mapOptions); directionsDisplay&lt;%= newsavedmap.id %&gt;.setMap(map&lt;%= newsavedmap.id %&gt;); } function calcRoute() { var request&lt;%= newsavedmap.id %&gt; = { origin: '&lt;%= newsavedmap.start %&gt;', destination: '&lt;%= newsavedmap.end %&gt;', waypoints: '&lt;%= newsavedmap.waypoints %&gt;', optimizeWaypoints: optimize, travelMode: google.maps.TravelMode.DRIVING }; directionsService&lt;%= newsavedmap.id %&gt;.route&lt;%= newsavedmap.id %&gt;(request&lt;%= newsavedmap.id %&gt;, function(response&lt;%= newsavedmap.id %&gt;, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay&lt;%= newsavedmap.id %&gt;.setDirections(response&lt;%= newsavedmap.id %&gt;); var route&lt;%= newsavedmap.id %&gt; = response&lt;%= newsavedmap.id %&gt;.routes[0]; var summaryPanel&lt;%= newsavedmap.id %&gt; = document.getElementById("directions_panel&lt;%= newsavedmap.id %&gt;"); summaryPanel&lt;%= newsavedmap.id %&gt;.innerHTML = ""; // For each route, display summary information. for (var i = 0; i &lt; route&lt;%= newsavedmap.id %&gt;.legs.length; i++) { var routeSegment = i+1; summaryPanel&lt;%= newsavedmap.id %&gt;.innerHTML += "&lt;b&gt;Route Segment: " + routeSegment + "&lt;/b&gt;&lt;br /&gt;"; summaryPanel&lt;%= newsavedmap.id %&gt;.innerHTML += route&lt;%= newsavedmap.id %&gt;.legs[i].start_address + " to "; summaryPanel&lt;%= newsavedmap.id %&gt;.innerHTML += route&lt;%= newsavedmap.id %&gt;.legs[i].end_address + "&lt;br /&gt;"; summaryPanel&lt;%= newsavedmap.id %&gt;.innerHTML += route&lt;%= newsavedmap.id %&gt;.legs[i].distance.text + "&lt;br /&gt;"; summaryPanel&lt;%= newsavedmap.id %&gt;.innerHTML += route&lt;%= newsavedmap.id %&gt;.legs[i].duration.text + "&lt;br /&gt;&lt;br /&gt;"; } } 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."); } }); }; &lt;% end if @newmaps %&gt; &lt;/script&gt; </code></pre> <p><strong>HTML</strong></p> <pre><code> &lt;% for newsavedmap in @newmaps %&gt; &lt;div class="wholemap"&gt; &lt;% if newsavedmap.name != nil and newsavedmap.name != '' %&gt; &lt;h4&gt;&lt;%= newsavedmap.name %&gt;&lt;/h4&gt; &lt;% else %&gt; &lt;h4&gt;Untitled Map&lt;/h4&gt; &lt;% end %&gt; &lt;a class="directions" href="#"&gt;Show Driving Directions&lt;/a&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;div class="map" id="map_canvas&lt;%= newsavedmap.id %&gt;"&gt;&lt;/div&gt; &lt;div class="route" id="directions_panel&lt;%= newsavedmap.id %&gt;"&gt;&lt;/div&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;a id="print&lt;%= newsavedmap.id %&gt;" target="_blank" class="printmap"&gt;Print this map&lt;/a&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;/div&gt; &lt;% end %&gt; </code></pre> <p><strong>Sample JS results</strong></p> <pre><code> $(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 &lt; route6.legs.length; i++) { var routeSegment = i+1; summaryPanel6.innerHTML += "&lt;b&gt;Route Segment: " + routeSegment + "&lt;/b&gt;&lt;br /&gt;"; summaryPanel6.innerHTML += route6.legs[i].start_address + " to "; summaryPanel6.innerHTML += route6.legs[i].end_address + "&lt;br /&gt;"; summaryPanel6.innerHTML += route6.legs[i].distance.text + "&lt;br /&gt;"; summaryPanel6.innerHTML += route6.legs[i].duration.text + "&lt;br /&gt;&lt;br /&gt;"; } } 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 &lt; route7.legs.length; i++) { var routeSegment = i+1; summaryPanel7.innerHTML += "&lt;b&gt;Route Segment: " + routeSegment + "&lt;/b&gt;&lt;br /&gt;"; summaryPanel7.innerHTML += route7.legs[i].start_address + " to "; summaryPanel7.innerHTML += route7.legs[i].end_address + "&lt;br /&gt;"; summaryPanel7.innerHTML += route7.legs[i].distance.text + "&lt;br /&gt;"; summaryPanel7.innerHTML += route7.legs[i].duration.text + "&lt;br /&gt;&lt;br /&gt;"; } } 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."); } }); }; </code></pre> <p><strong>EDIT 1</strong></p> <p>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:</p> <pre><code> &lt;script type="text/javascript"&gt; var dirHelper = null; &lt;% @newmaps.each do |newsavedmap| %&gt; dirHelper = new DirectionHelper(newsavedmap.id); dirHelper.calcRoute(newsavedmap.start, newsavedmap.end, newsavedmap.waypoints); &lt;% end %&gt; &lt;/script&gt; </code></pre> <p>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. </p> <p>Next error: newsavedmap is not defined. I tried solving this by replacing newsavedmap with &lt;%= 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?</p> <p><strong>Edit 2</strong></p> <p>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:</p> <pre><code> &lt;script type="text/javascript"&gt; var dirHelper = null; &lt;% @newmaps.each do |newsavedmap| %&gt; dirHelper = new DirectionHelper(newsavedmap.id); &lt;%= "dirHelper.calcRoute('#{newsavedmap.start}', '#{newsavedmap.end}', '#{'5 Main Street Charlestown MA'}');" %&gt; &lt;% end %&gt; &lt;/script&gt; </code></pre> <p>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.</p> <p>Now, I'm just giving a javascript error: newsavedmap is not defined. Any ideas?</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USKDP
    1. USKDP
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COYou may have some js scoping issues since your function names are overwriting themselves in your main for loop. You may want to move some of those functions to objects and as you iterate over the rails models, you create a new js-map object, and pass it the params it needs to create the map, etc. That may not solve all your issues, but I think it will get you in the right direction.
      singulars
      1. POHow can I create multiple Google Maps with driving directions on the same page?
      1. USCarl
    2. COnewsavedmap is a ruby object, not a js one. You need to escape newsavedmap.id with erb, <%= newsavedmap.id %>
      singulars
      1. POHow can I create multiple Google Maps with driving directions on the same page?
      1. USCarl
    3. COThanks, Carl. Are you referring to my Edit 3 version at the top? I think I use erb there with newsavedmap.id .
      singulars
      1. POHow can I create multiple Google Maps with driving directions on the same page?
      1. USKDP
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload