Question

Alright, so I’m a noobie when it comes to jQuery mobile, but I’m getting my feet wet.

The gist is a two page mobile site. Page one is a simple form where users select a couple of options. When the form is submitted, they get redirected to page two, which contains the “map canvas”. But for some reason, the next page is just blank. Sometimes when I hit the back button I can see the map but briefly. I’m stumped!

I’m using jQuery 1.6.4 and jQuery Mobile 1.0rc1.

Here is some of my code:

Page One HTML:

<div data-role="page" id="one">
    <div data-role="content">
        <div data-role="fieldcontain">
            <form action="" id="mobile-findpath" method="post">
                <label for="mobile-start" class="select">Start:</label>
                <select name="start" id="mobile-start">
                    <option data-placeholder="true" value="">Current Position</option>
                    {% for node in nodes %}
                    <option value="{{ node.lat }},{{ node.lng }}">{{ node.label }}</option>
                    {% endfor %}
                </select>
                <label for="mobile-end" class="select">Dest:</label>
                <select name="end" id="mobile-end">
                    {% for node in nodes %}
                    <option value="{{ node.label }}">{{ node.label }}</option>
                    {% endfor %}
                </select>
                <a href="/m-map/" data-role="button" data-icon="gear">Show Route</a>
                <!--<a href="#two" data-role="button" data-icon="gear">Show Route</a>-->
            </form>
        </div>
    </div>
</div>

Page Two (map) HTML:

<div data-role="page" data-title="Map" data-theme="b" class="page-map" style="width:100%; height:100%;">
    <div data-role="header"><h1>Map</h1></div>
    <div data-role="content" style="width:100%; height:100%; padding:0;">
        <div id="map_canvas" style="width:100%; height:100%;"></div>
    </div>
</div>

Relevant JS:

$(".page-map").live("pagecreate", function() {
    wMobile = WayFinderMobile();
    if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position){
            wMobile.initialize(position.coords.latitude, position.coords.longitude, true);
        });
    } else {
        wMobile.initialize(38.94617, -92.32866);
    }
});

Answer 1

It looks like my problem was two fold,

One was the problems was that I had to specify a width and height for the map-canvas div

<div data-role="content" style="padding:0px;margin:0;">
        <div id="map_canvas" style="width:100%;height:350px;"></div>
</div>

Also, I had to set the map to create on the “pageshow” event for the page the map was in.