Google Maps Javascript V3 API with Rhomobile

Question

I am trying to load Google map javascript V3 API in rhomobile. but unable to do so. I have Used below code in map.erb:

<div data-role="header" data-position="inline">
  <h1>Login</h1>
</div>

<div data-role="content">
  <form method="POST" action="<%= url_for :action => :do_login %>">
    <% if @msg %>
        <div class="error-message"><%= @msg %></div>
    <% end %>

    <div data-role="fieldcontain">
      <label for="login" class="itemLabel">Login</label>
      <input type="text" id="login" name="login" class="itemValue" <%= placeholder("Login") %> />
    </div>
    <div data-role="fieldcontain">
      <label for="password">Password</label>
      <input type="password" id="password" name="password" class="itemValue" <%= placeholder("Password") %> />
    </div>
    <input type="submit" value="Login"/>
  </form>
</div>
<ul>
  <li>
    <a href = "<% url_for :action =>:map_it %>">
      <span class="title">Show On Map</span>
      <span class="disclosure_indicator"></span>
    </a>

  </li>
  <li>
        <a href = "<% url_for :action =>:myMaps %>">
                          <span class="title">Show On Map</span>
                          <span class="disclosure_indicator"></span>
                        </a>
  </li>
</ul>

and called it using controller. But nothing happens when I click on the link which redirects to map.erb.

Output of the Rholog.txt

    I 02/03/2014 18:45:50:322 00001b50         QtMainWindow| WebView: URL changed to http://127.0.0.1:62125/app/index.erb
    I 02/03/2014 18:45:50:364 00001834           HttpServer| Process URI: '/public/api/rhoapi-modules.js'
    I 02/03/2014 18:45:50:373 00001834           HttpServer| Process URI: '/public/jquery/jquery-1.9.1.min.js'
    I 02/03/2014 18:45:50:496 00001834           HttpServer| Process URI: '/public/jqmobile/jquery.mobile-1.3.1.min.css'
    I 02/03/2014 18:45:50:529 00001834           HttpServer| Process URI: '/public/css/jqmobile-patch.css'
    I 02/03/2014 18:45:50:530 00001834           HttpServer| Process URI: '/public/jqmobile/jquery.mobile-1.3.1.min.js'
    I 02/03/2014 18:45:50:537 00001834           HttpServer| Process URI: '/public/js/jqmobile-patch.js'
    I 02/03/2014 18:45:50:538 00001834           HttpServer| Process URI: '/public/css/android.css'
    I 02/03/2014 18:45:50:654 00001834           HttpServer| Process URI: '/public/jqmobile/images/icons-18-white.png'
    I 02/03/2014 18:45:50:682 00001834           HttpServer| Process URI: '/favicon.ico'
    E 02/03/2014 18:45:50:684 00001834           HttpServer| The file /favicon.ico was not found
    I 02/03/2014 18:45:50:708 00001b50         QtMainWindow| Page load complete.
    I 02/03/2014 18:45:52:079 00001834           HttpServer| Process URI: '/app/Settings/login'
    I 02/03/2014 18:45:52:272 00001834                  APP| RHO serve: /app/Settings/login
    E 02/03/2014 18:45:52:437 00001834              RhoRuby| require_compiled: error: can not find Settings/settings_controller
    I 02/03/2014 18:45:52:605 00001834              RhoRuby| require_compiled: Settings/controller
    I 02/03/2014 18:45:52:844 00001834              RhoRuby| require_compiled: helpers/browser_helper
    I 02/03/2014 18:45:52:943 00001834                  APP| eval_compiled_file : F:/RubyMapsWRKSPC/MyRhodesV3Maps/app/Settings/login.erb
    I 02/03/2014 18:45:52:947 00001834           HttpServer| GC Start.
    I 02/03/2014 18:45:52:948 00001834           HttpServer| GC End.
    I 02/03/2014 18:45:52:970 00001b50         QtMainWindow| WebView: URL changed to http://127.0.0.1:62125/app/index.erb#/app/Settings/login
    I 02/03/2014 18:45:54:789 00001834           HttpServer| Process URI: '/app/Settings/myMaps'
    I 02/03/2014 18:45:54:790 00001834                  APP| RHO serve: /app/Settings/myMaps
    E 02/03/2014 18:45:54:791 00001834              RhoRuby| require_compiled: error: can not find Settings/settings_controller
    I 02/03/2014 18:45:54:793 00001834                  APP| eval_compiled_file : F:/RubyMapsWRKSPC/MyRhodesV3Maps/app/Settings/map.erb
    I 02/03/2014 18:45:54:794 00001834           HttpServer| GC Start.
    I 02/03/2014 18:45:54:796 00001834           HttpServer| GC End.
    I 02/03/2014 18:45:54:801 00001b50         QtMainWindow| WebView: URL changed to http://127.0.0.1:62125/app/index.erb#/app/Settings/myMaps
    I 02/03/2014 18:47:31:140 00001b50            RhodesApp| callAppActiveCallback
    I 02/03/2014 18:47:31:141 00001b50         AppCallbacks| addCommand: APP-DEACTIVATED
    I 02/03/2014 18:47:31:142 00001b50                  Net| Method: GET;Url: http://127.0.0.1:62125/system/deactivateapp
    I 02/03/2014 18:47:31:142 00001be8         AppCallbacks| process command: APP-DEACTIVATED
    I 02/03/2014 18:47:31:143 00001be8         AppCallbacks| ThreadQueue blocked for 4294967295 seconds...
    I 02/03/2014 18:47:31:145 00001834           HttpServer| Process URI: '/system/deactivateapp'
    I 02/03/2014 18:47:31:145 00001834                  APP| AppEvent Deactivated

Edit: I have changed the Complete program. This is not working in RhoSimulator, but working on phone(Android). The Only problem i am facing on phone is Map is not getting loaded when i go to the map screen. But when i refresh the screen it's getting loaded. map.erb :-

 <div data-role="header" data-position="inline">
   <h1>Maps</h1>
 </div>

 <div data-role="content" id="pageMaps">
  <script type="text/javascript"> 
  $(function{alert("test");}) 
  </script> 
    <script type="text/javascript" 
        src="http://maps.google.com/maps/api/js?sensor=true"> 
    </script> 
    <script type="text/javascript"> 
    alert("Hello");
         function initialize() { 
        var latlng = new google.maps.LatLng(-34.397, 150.644); 
        var myOptions = { 
          zoom: 8, 
          center: latlng, 
          mapTypeId: google.maps.MapTypeId.ROADMAP 
        }; 
        var map = new 
    google.maps.Map(document.getElementById("map_canvas"), 
            myOptions); 
      } 

      $('#pageMaps').live('pageshow', function(){
        initialize();
      });

    </script> 
    <div id="map_canvas" style="width:200px; height:300px;"></div> 
 </div>

controller.rb

def myMaps
  @msg = "Map is loading."
  render :action => :map
end

and a link in login.erb

        <div data-role="content">
           <ul data-role="listview">
             <li><a href="<%= url_for :action =>:myMaps %>">Maps</a></li>
           </ul>
         </div>

Answer 1

I think that getting the map page only when you reload the map.erb page is due to jQuery Mobile way of loading pages using AJAX.

You can force a complete reload of your page using the data-ajax="false" in the login.erb:

<div data-role="content">
  <ul data-role="listview">
    <li><a href="<%= url_for :action =>:myMaps %>" data-ajax="false">Maps</a></li>
  </ul>
</div>

Take a look at jQuery Mobile docs for more informations.