CODEWITHSUNDEEP
javascriptjquerygoogle-maps-api-3jquery-mobile
Beor
Beor

Reputation: 399

jQuery Mobile and Google map not visible

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);
    }
});

Upvotes: 0

Views: 2731

Answers (2)

Beor
Beor

Reputation: 399

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.

Upvotes: 3

GreyBeardedGeek
GreyBeardedGeek

Reputation: 30088

Not sure what WayFinderMobile is, but have you tried the jquery-ui-map plugin at http://code.google.com/p/jquery-ui-map/

There's lots of good examples there as well.

Upvotes: -1

Related Questions