I just started using Ratchet and it's great. I´m developing a Phonegap app with Ratchet 2.0.2 using push.js for transition between pages. But i canot run external javascripts in that. i checked this
But i couldnot load the googlemap javascript v3 in that.
my HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Movie finder</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/ratchet.min.css">
</head>
<body>
<header class="bar bar-nav">
<a class="btn btn-link btn-nav pull-left" href="interests.html" data-transition="slide-out">
<span class="icon icon-left-nav"></span>
Back
</a>
<h1 class="title">Map</h1>
</header>
<style>
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<div class="content">
<button class="btn" onClick="initialize();">click</button>
<div id="map-canvas"></div>
</div>
</body>
<script src="js/ratchet.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function initialize() {
var map;
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</html>
please help me to load google map in ratchet
Your map is in a map container, which is 0px tall when the document loads and your map is initialized. Give it a height, and check out your map.
No need for an initialization button. Initializing on load is enough.
http://jsfiddle.net/a910o99w/