Google Maps in Jquery Mobile

How to put a google map on JQUERY Mobile?

That error suggests that you haven't included an API key with your Google Maps api call. You need to go to https://developers.google.com/maps/, sign up for an API key, and include it in your call. Below is a really simple example using the JS api.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY></script>

Google maps with JQuery Mobile and jquery-ui-map

Solution

Map can't be shown on canvas element, it must be DIV like this:

<div id="map_canvas"></div>

Also don't use percentages for map height, ether use px, em or use css like in my example to fill working page.

Working HTML :

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.css"/>
        <style>
            #map_canvas {
                position: absolute;
                top: 0;
                bottom: 0;
                left:0;
                right:0;
            }
        </style>        
        <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>              
        <script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script>
        <script src="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
        <script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/min/jquery.ui.map.full.min.js"></script>
        <script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/jquery.ui.map.extensions.js"></script>
        <script>
            $(document).on('pageshow', '#main', function() {  
                $('#map_canvas').gmap();
                $('#map_canvas').gmap({ 'center': '42.345573,-71.098326' });               
                $('#map_canvas').gmap({ 'zoom': 8 });
                $('#map_canvas').gmap('refresh');
            });
        </script>  
    </head>
    <body>
        <div data-role="page" id="main">          
            <div data-role="content">
                <p>
                    TEST SITE
                </p>
                <p>
                    <div id="map_canvas"></div>
                </p>
            </div>
        </div>
    </body>
</html>

If you want to find more about this topic + examples then take a look at this ARTICLE.

Showing a Google Map in JQuery Mobile

Ok. I'm doing it like this:

var home = new google.maps.LatLng(x, y);

$('#directions_map').live("pageshow", function() {
    $('#map_canvas_1').gmap('refresh');
    });

$('#directions_map').live("pagecreate", function() {
    $('#map_canvas_1').gmap({'center': home, 'zoom':17 });
    $('#map_canvas_1').gmap('addMarker', { 'position': home, 'animation' : google.maps.Animation.DROP } );
    });

So please try:

- create the gmap on pagecreate

- only refresh on pageshow

- the marker is a bonus ;-)

let me know if this does the trick. It's from a working example of mine, so it should be ok. I think it's important you set up the gmap ahead of pageshow. If you think of JQM as a stage... pageshow would be right before lifting the curtain. Maybe too late for Google Magic. Pagecreate seems better...

PhoneGap + JQuery Mobile + Google Maps v3: map shows Top Left tiles?

intro

Newer versions of jQuery Mobile and Google Maps v3 are a little bit special.

Your first problem was using pageinit event to the the calculation. At that point you cant get a correct page height and width. So instead use pageshow, you will find it working in my example.

Before you show the map you need to resize its content DIV. This is because content div will resize according to available inner elements. So we need to fix this manually, through javascript or CSS. I already have a answer on that question: google map not full screen after upgrade to jquerymobile 1.2 but I can also show you a working example:

Working example

Working jsFiddle example: http://jsfiddle.net/Gajotres/GHZc8/ (Javascript solution, CSS solution can be found in a bottom link).

Code

HTML

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>    
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
        </div>

        <div data-role="content" id="content">
            <div id="map_canvas" style="height:100%"></div>
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">
            <h3>
                First Page
            </h3>
        </div>
    </div>
</body>
</html>

Javascript

Here's a function used to calculate correct page height:

   $('#map_canvas').css('height',getRealContentHeight());

function getRealContentHeight() {
    var header = $.mobile.activePage.find("div[data-role='header']:visible");
    var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
    var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
    var viewport_height = $(window).height();

    var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
    if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
        content_height -= (content.outerHeight() - content.height());
    } 
    return content_height;
}

Another solution

There's also another solution to this problem that only uses CSS and it can be found HERE. I prefer this solution cause it don't require javascript to correctly fix the map height.

CSS:

#content {
    padding: 0;
    position : absolute !important; 
    top : 40px !important;  
    right : 0; 
    bottom : 40px !important;  
    left : 0 !important;     
}

One last thing

Also if page width is still incorrect just set it to 100%:

$('#map_canvas').css('width', '100%');

Grey Google Maps On Intel XDK using jQuery Mobile

Make sure you registered the correct key(s) and package names with the Google API console. Specifically, if you are compiling and launching directly from Android Studio, you are probably signing in debug mode. If so, you need to add your debug key hash + package name to the allowed applications in the API console.

You can also check this related SO question: Android app google maps showing grey tiles and not map!

jquery mobile, google map body 100% higher

If I'm reading this correctly you're trying to stretch your map 100% between your header and fixed footer.

If you look at the jquery mobile example with google maps they have their page container and map canvas set to 100% height with a header. Here is their html...

<div data-role="page" id="map-page" data-url="map-page">
   <div data-role="header" data-theme="a" id="head">
      <h1>Maps</h1>
   </div>
   <div role="main" class="ui-content" id="map-canvas">
    <!-- map loads here... -->
   </div>
</div>

and css...

<style>
   #map-page, #map-canvas { width: 100%; height: 100%; padding: 0; }
</style>

This works as far as stretching the map but it adds (in their example) an extra 44 pixels due to the header that they don't account for. I added a small script to fix this in a project I did a while back, this required setting the map to a global variable and calling a resize procedure once the page was loaded (I loaded map in page init).

function resize_map() {
    $('#map-canvas').height($('#map-canvas').height() - $('#head').height());
    google.maps.event.trigger(map, "resize");
}

There's also in the default style your using a 1px border that you would need to take care of.

Now if you want to add your fixed footer, you would also need to subtract the footer's height from map-canvas when setting the height. There is also padding added to the page.

Below is the code for what I think you were trying to accomplish...

<style type="text/css">
    #map-page, #map-canvas { width: 100%; height: 100%; padding: 0;}
    #map-page{padding-bottom:0px !important;}
    .ui-header, .ui-footer {border-width: 0px 0;}
</style>

Your styles, setting the page and map canvas to 100% height, removing the bottom padding added by the fixed footer, and getting rid of the border of the default styles you linked...

<script type="text/javascript">
    var map;
        
    function resize_map() {
        $('#map-canvas').height($(window).height() - $('#head').height() - $('#foot').height());
        google.maps.event.trigger(map, "resize");
    }
    
    $( document ).on( "pageinit", "#map-page", function() {
        var latlng = new google.maps.LatLng(-25.363882, 131.044922);
        var myOptions = {
            zoom: 10,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
        // Add an overlay to the map of current lat/lng
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: "Greetings!"
        });

        $(window).resize(function () {
           resize_map();
        });
    });
    
    $(document).on('pagecontainershow', function(){
        var pageid = $("body").pagecontainer("getActivePage").prop("id");
        
        if(pageid === "map-page"){
            resize_map();
        }
    });
</script>

The script draws the map and on page show we call our resize, subtracting the header and footer height.

<div data-role="page" id="map-page" data-url="map-page">
    <div data-role="header" data-theme="a" id="head">
    <h1>Maps</h1>
    </div>
    <div role="main" class="ui-content" id="map-canvas">
        <!-- map loads here... -->
    </div>
    <div data-role="footer"  id="foot" data-position="fixed" data-tap-toggle="false">
        <h1>Google Maps V3</h1>
    </div>
</div>

Your basic html markup.

Edit: Changed to window.height if this is a browser application. You would want to trigger the resize function whenever the window is resized. Again this is to set the map the exact height between your fixed footer and header.