This html example works properly. It loads Map and it can be moved, zoomed etc.
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript" ></script>
<script src="C:\Sites\MyApp\app\assets\javascripts\mobile\jquery.ui.map.full.min.js" type="text/javascript"></script>
</head>
<body>
<script>
$(function() {
$('#map_canvas').gmap();
});
</script>
<div id="map_canvas" style="width:250px;height:250px"></div>
</body>
</html>
But when I put this into my Ruby on Rails application (only difference in 4th script path):
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript" ></script>
<script src="assets\mobile\jquery.ui.map.full.min.js" type="text/javascript"></script>
</head>
<body>
<script>
$(function() {
$('#map_canvas').gmap();
});
</script>
<div id="map_canvas" style="width:250px;height:250px"></div>
</body>
</html>
Map is not movable anymore. It's like static image. Every js file gets loaded and everything is all the same except "jquery.ui.map.full.min.js" filepath changes. That file is loaded properly in both cases and only difference is that, in Rails case that file has one extra blank line and one extra semicolon (;) in the end of the file.
What happens? Has someone else succeeded in combining jquery-ui-map plugin and ruby on rails? Any ideas what's causing this oddity?
I'm using jquery-ui-map-3.0-rc Rails 3.2.3