1

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

Community
  • 1
  • 1
Dino
  • 806
  • 1
  • 8
  • 22

1 Answers1

1

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.

.content {height: 100%}

No need for an initialization button. Initializing on load is enough.

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

http://jsfiddle.net/a910o99w/

kindasimple
  • 2,427
  • 1
  • 16
  • 20
  • Code is working on home page. i want to access this map in my contact us page. But sadly its not working. – Dino Sep 13 '14 at 14:16
  • I'm sure its something small. make sure you are loading the google maps js file on the contact page, and check the console log for errors. – kindasimple Sep 13 '14 at 19:51
  • ratchet uses PUSH function. It prevents external scripts. I used `data-ignore="push"` to prevent this. But it is not a better way. I have to find another way to make this run. Because when data-ignore is used, its transition effect is gone. – Dino Sep 15 '14 at 05:37
  • Oh, right. Register an event listener on your window to intercept the "push" message that is fired after a push transition. `window.addEventListener('push', initialize);` http://goratchet.com/components/#push – kindasimple Sep 15 '14 at 22:45
  • yeah. now im using ionic framework. Because rachet cannot be used in some phones. I dont know why – Dino Sep 16 '14 at 04:21
  • If using Ratchet I would ditch Snap and handle transitions yourself. I would take the angular route if given the chance too. Check out Onsen UI if you're still testing out frameworks. Looks promising to me. I like ionic as well. http://onsenui.io/ – kindasimple Sep 16 '14 at 04:29
  • Not only transition , the `EventListener` will not work on some android phones. I recently checked a `micromax` phone. – Dino Sep 16 '14 at 04:33