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?