Google Maps Displaying Incorrectly in JQuery Mobile

Question

I'm trying to display a Google Map on a JQuery Mobile page, but am having difficulty getting it to display correctly every time the page is loaded.

I have two of the main pages working:

index.php
map.php

When loading the site from index.php then switching to map.php in the navbar, the map loads the first time. Switching back to index.php and then back to map.php again, the map's center loads in the top left and the full map is not displayed until the screen is touched (none of this occurs on a computer's browser, however). However, if I load map.php first, the map stays in place with any page changes back and forth.

My test site is http://beersandears.net/mbeta/

Any ideas on what I am missing? I've gotten to this point from research on the Internet, but nothing I have tried is helping to resolve this issue, including:

The third one seems very similar to my issue but the solution of using "pageshow" isn't working.

Here is the code for map.php:

<!DOCTYPE html>
<html>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title('|', true, 'right'); ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://maps.google.com/maps/api/js?key=AIzaSyBtVQWtkD4MjJ3zbe9DXgPqSlC2XDn5K7c&sensor=true" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<style type="text/css">
img {
    max-width:100%;
    height:auto;
}
</style>
</head>
<body>
<div id="wrapper" data-role="page" id="map_page">
    <div id="header" data-role="header" data-position="fixed" data-id="head">
        <h1>WDW Map</h1>
    </div><!-- end header -->
    <div id="map_canvas" data-role="content">
    </div><!-- end content -->

<div id="footer" data-id="navbar" data-role="footer" data-position="fixed"> 
    <div id="navbar" data-role="navbar">
        <ul>
            <li><a href="index.php">WDW Beer List</a></li>
            <li><a href="map.php">WDW Map</a></li>
            <li><a href="blog.php">Articles</a></li>
        </ul>
    </div><!-- end navbar -->
</div><!-- end footer -->
<script type="text/javascript">
        $(function(){
            initializeMap(28.385208623548024,-81.56713485717773);
        });

        function initializeMap(lat,lng) {
            var adjustedHeight = ($(window).height());
            $('#map_canvas').css({height:adjustedHeight});
            //$("#map_canvas").height = $(window).height() - $("#header").height() - $("#footer").height();
            setTimeout(function() {

                var latlng = new google.maps.LatLng(lat, lng);
                var myOptions = {
                        zoom: 12,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
                //var crosshairLayer = new google.maps.KmlLayer('http://freezoo.alwaysdata.net/justcrosshair2.kml',
                //{preserveViewport: true});

                //crosshairLayer.setMap(map);

                google.maps.event.trigger(map, 'resize');
                map.setZoom( map.getZoom() );
            }, 500);
        }
</script>
</div><!-- end wrapper -->
</body>
</html>

Answer 1

Solved. I had two IDs in the data-role="page" div and it was reading the first one as the ID while I was trying to reference the second one. The pageshow event fix now works as seen in the third link above .

Google Maps Displaying Incorrectly in JQuery Mobile

Question

1 answers

solution1
1 ACCPTED 2012-08-07 23:32:40

Google Maps Displaying Incorrectly in JQuery Mobile

Question

1 answers

solution1 1 ACCPTED 2012-08-07 23:32:40

solution1
1 ACCPTED 2012-08-07 23:32:40