CODEWITHSUNDEEP
google-mapsjquery-mobile
Shawn
Shawn

Reputation: 196

JQuery Mobile and Google Maps Not Rendering Correctly

I am simply trying to display a google map within a jquery mobile page. If I load the page directly it works. However, if I navigate to the page from another page it only renders a single map tile. At first glance it would appear that my issue was similar to https://forum.jquery.com/topic/google-maps-inside-jquery-mobile

However, I was already performing my initialization within the 'pageinit' event and my map div has a set width and height.

I have seen http://code.google.com/p/jquery-ui-map/ but I would rather not use a (another) third party plugin if at all possible.

Here's what my page looks like:

<!DOCTYPE HTML>
<html>
<head>
    <title>PhoneGap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="cordova-1.6.1.js"></script>
    <link rel="stylesheet" href="jquery.mobile-1.1.0.min.css" />
    <script src="jquery-1.7.1.min.js"></script>
    <script src="global.js"></script>
    <script src="jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
    <div id="mapPage" data-role="page">
        <style type="text/css">
            html
            {
                height: 100%;
            }
            body
            {
                height: 100%;
                margin: 0;
                padding: 0;
            }
            #map_canvas
            {
                height: 100%;
            }
        </style>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=***API_KEY_REMOVED***&sensor=true">
        </script>
        <script type="text/javascript">
            function initialize() {
                var height = $(window).height() - 50;
                var width = $(window).width();

                $("#map_canvas").height(height);
                $("#map_canvas").width(width);
                var myLatlng = new google.maps.LatLng(39.962799, -82.999802);
                var myOptions = {
                    center: myLatlng,
                    zoom: 18,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
                //alert($(map.getDiv()).width());   
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: ""
                });
                google.maps.event.trigger(map, 'resize')
            }

            $("#mapPage").live('pageinit', function () {

                initialize();
            });

        </script>
        <div data-role="header" id="menuHeader">
            <a href="MenuDialog.htm" class="menuLink" data-role="none" data-rel="dialog">
                <img class="headerIcon" style="height: 40px; border-right: 1px solid #333333; padding-right: 5px;"
                    id="MenuIcon" src="images/menuIcon.png" /></a>
            <p>
                Loc
            </p>
        </div>
        <div data-role="content">
            <div id="map_canvas" style="margin-top: 50px;">
            </div>
        </div>
</body>
<html>

Thanks in advance for you help.

Update:

After some experimenting I added the following delay to my resize event:

setTimeout(function() {

            google.maps.event.trigger(map,'resize');
        }, 500);

This seemed to fix the issue. Hopefully this helps someone else.

Upvotes: 10

Views: 12099

Answers (5)

Nogebour
Nogebour

Reputation: 141

I read on a website that if you have this problem it's beacuse the dom isn't totally loaded when you initialize your google map. You must add this in your code:

$( document ).bind( "pageshow", function( event, data ){
google.maps.event.trigger(map, 'resize');
});

It works for me. It's maybe brutal to resize at every page you show but ... it works.

Upvotes: 13

Daniel Douglas
Daniel Douglas

Reputation: 3433

I found the issue for me was that JQuery mobile uses Ajax to load the pages. I am not sure if it is the best practice but I simply forced it to load my map page normally by putting the following code in the anchor tag:

data-ajax="false"

Upvotes: 0

Noor
Noor

Reputation: 601

I think the right approach would be to trigger the event when partial tile is loaded once. Below code snippet will help you in achieving that.

google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
    google.maps.event.trigger(map,'resize');
});

Upvotes: 0

Joe&#39;s Ideas
Joe&#39;s Ideas

Reputation: 550

Instead of firing a resize, I solved this by wrapping my js in a 'pagecreate' event... like this:

$(document).on('pagecreate', '#map', function() {
    var mapOptions = {
        center: new google.maps.LatLng(40.773782,-73.974236),
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };  

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

});

Upvotes: 4

Andrew Leach
Andrew Leach

Reputation: 12983

You have <html> and <body> at 100% size, but not the <div>s in the hierarchy between <body> and <div id="map_canvas">.

Try adding those to your CSS as well (the content one will need an id).

You may also need to ensure that the API knows the size of the map <div> by triggering a resize event when everything is ready. Showing only a single tile is a classic symptom of the API getting it wrong (and generally assuming it has zero size).

Upvotes: 4

Related Questions