JQuery - Placing a Google Map in a "content" isn't visible?

Question

Having a bit of trouble placing a map within data-role="content" while using Google Maps v3 and JQuery. No errors show in the console so I am having a hard time debugging. No map shows up on the screen.

Here are my two files:

index.html

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, width=device-width, user-scalable=no" />
        <link rel="stylesheet" href="https://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="https://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?&sensor=true"></script>
        <script type="text/javascript" src="js/mapload.js"></script>
</head>
<body>
    <div data-role="page" id="map">
        <div data-role="header">
            <h1>Header</h1>
        </div>
        <div data-role="content">
            <div id="map-canvas"></div>
        </div>
    </div>
</body>
</html>

mapload.js

function initialize()
var mapOptions = {
    center: new google.maps.LatLng(49,-8),
    zoom: 15,
    disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

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

}

google.maps.event.addDomListener(window, 'load', initialize);

This gave me some insight but didn't complete answer my question.

EDIT: SOLUTION

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1"/>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key={REPLACE THE BRACKETS AND THIS TEXT WITH YOUR API KEY}&sensor=true"></script>    
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
</head>
<body>
<script type="text/javascript">
    $(document).on('pageinit', '#index',function(e,data){    
        var map = new google.maps.Map(document.getElementById('map_canvas'), {
            center: new google.maps.LatLng(11.618044,-34.823347),
            zoom: 15,
            disableDefaultUI: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
    });
    </script>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
        </div>

        <div data-role="content" id="content" style="padding:0;position:absolute;top:40px;right:0;bottom:40px;left:0;">
            <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>

score 4 · Accepted Answer · edited May 23 '17 at 12:14

There's only one available way of using Google maps with jQuery Mobile. Because jQuery Mobile is specific window load can't be used to initialize the map.

Specifically correct height is needed to initialize the map successfully and it can ONLY be done during the jQuery Mobile pageshow page event. If you want to find out more about jQuery Mobile page events and why is pageshow event important for plugin initialization take a look at my private blog ARTICLE. Or you can find it HERE.

Let me make this story short, here's a working example: http://jsfiddle.net/Gajotres/pkZHg/

And here's a javascript and CSS used:

Javascript

$(document).on('pageinit', '#index',function(e,data){    
    var map = new google.maps.Map(document.getElementById('map_canvas'), {
        center: new google.maps.LatLng(42.618044,-87.823347),
        zoom: 15,
        disableDefaultUI: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
});

CSS

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

Gokul Kav · Answer 2 · 2013-06-17T20:25:37.693

2

load mapload.js at the end of the html

<div data-role="page" id="map">
        <div data-role="header">
            <h1>Header</h1>
        </div>
        <div data-role="content">
            <div id="map-canvas"></div>
        </div>
    </div>
<script type="text/javascript" src="js/mapload.js"></script>

the DOM is not ready yet when you are calling the map functions

the other error might be CSS styling.. you could try this

a set width and height `

#map-canvas {
  width: 480px;
  height: 640px;
}

`

edited Jun 17 '13 at 20:25

answered Jun 17 '13 at 20:17

Gokul Kav

839
1
8
14

well that was one error. the other is make sure ur map-canvas css is correct.. inspect the body and see if there is any actual content inside map-canvas they u can figure out how to best CSS with your webpage. that should do the work – Gokul Kav Jun 17 '13 at 20:23

JQuery - Placing a Google Map in a "content" isn't visible?

2 Answers2

Javascript

CSS