Converting Google Maps API V2 to V3 for Ruby on Rails app

Question

Thanks for any help you can provide!

Summary I have a Google Maps API V2 map application built in Ruby on Rails, and I'm trying to convert to V3. I've updated my existing javascript using advice from Tips for Upgrading Gmaps v2 to v3 more quickly. However, my maps are still not displaying on the page.

Details: Using V2, this code would display a series of unique, Point A to Point B maps on a single webpage. A user could have many saved maps, and this code would show them. Now, the map canvas and route does not resolve.

Again, I appreciate your help!

EDIT 3: Issue is calcRoute()

I have looked at everything and figured out that the map works until I start adding in Start and End variables. These variables look like they should work, but the directions and route don't appear. Is there something that I'm doing wrong in loading these variables? I've provided both my original js and the result.

Original:

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);
}
});
}

Result:

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);
}
});
}

EDIT 2: Result Posted

As requested, here is the result of what happens when I use the script listed in EDIT 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

EDIT 1: Second Attempt

This time, I started with the Directions example from Google. Still no luck, unfortunately.

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

ABOVE IS LATEST VERSION. ORIGINAL CODE POST FOLLOWS

Javascript:

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

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

You haven't added any maps for this trip yet.

score 0 · Answer 1 · answered Mar 18 '13 at 01:33

0

I think you have a few things going on here:

1) In v3 the the way you reference the api is different. It should be something like this.

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

2) You have the initialize function but you aren't calling it anywhere such as the onload.

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

3) The way you setup your map its best to try to set up the options array to be passed in.

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) For the marker try setting it up like this.

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');
});

Take a look at the Maps API examples page (https://developers.google.com/maps/documentation/javascript/examples/). I think this should set you straight.

Break the problem down by getting it to work without the Ruby code. Just have the Javascript first and then once you get a single map working then add the Ruby back in. I stripped out all of your Ruby code and with the few changes I mentioned above I got a map with a marker displayed.

--Chris

answered Mar 18 '13 at 01:33

Chris Casad

183
1
10

Chris, thanks for your response! I actually started with the directions example and tried to work my way through it by slowly adding Ruby. Unfortunately, the first thing that throws it off is when I add `var start = <%= savedmap.from%>` and `var end = <%= savedmap.to %>`. I know these fields will cycle through my data because I tried printing them to the HTML, but for some reason, the V3 javascript won't accept. I've posted my latest version. Appreciate any help you can offer! – KDP Mar 18 '13 at 02:53
Can you post what the HTML is after Ruby has dealt with it? Since Google Maps is on the Javascript side its easier to debug once the server side script (Ruby) has spit out what it needs to do. At that point we are only dealing with the Javascript (in case Ruby output causing an issue). – Chris Casad Mar 18 '13 at 13:08
Sorry, Chris, backed up on a project right now. Will be back to you ASAP. – KDP Mar 21 '13 at 20:36
Chris, I'm back online and have posted the results from the Ruby output. I'm not able to get the map to resolve in the canvas. Appreciate your help! – KDP Mar 29 '13 at 22:51
Ok try updating the map DIV line by adding width and height: `
` I think that should get the map to display. – Chris Casad Mar 31 '13 at 00:58
Hmm. The canvas is already styled through an external stylesheet at those dimensions. The directions are not resolving either, so I don't think that's the issue. – KDP Mar 31 '13 at 20:36

Converting Google Maps API V2 to V3 for Ruby on Rails app

1 Answers1