Aks Aks - 6 months ago 36
Ruby Question

Google Maps Javascript V3 API with Rhomobile

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

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.