Google maps with JQuery Mobile and jquery-ui-map

javascript jquery-mobile google-maps-api-3 html5-canvas

10,525

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.

10,525

Author by

Matthijs

It's me! SOreadytohelp

Updated on June 04, 2022

Comments

Matthijs almost 2 years

I'm using the jQuery UI Map libary (https://code.google.com/p/jquery-ui-map/) to display a map on my html5 mobile website, however i'm only getting a grey square no matter what i try.

My code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <title>test</title> 
  <link rel="stylesheet" href="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
  <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="https://local url/js/jquery-ui.js"></script>
  <script type="text/javascript" src="https://local url/js/jquery.ui.map.full.min.js"></script>
  <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>
</head>
<body>
<div data-role="page" id="main">

  <div data-role="content">
    <p>
      TEST SITE
    </p>
    <p>
        <canvas id="map_canvas" style="width:50%;height:50%"></canvas>    
    </p>
  </div>

</div>

<script>
$(document).ready(function()
{
    $('#map_canvas').gmap();
    $('#map_canvas').gmap({ 'center': '42.345573,-71.098326' });               
    $('#map_canvas').gmap({ 'zoom': 8 });
            $('#map_canvas').gmap('refresh');
});
</script>
</body>
</html>

The result i get is this:

http://upload.mattie-systems.nl/uploads/28217-knipsel.png

Any help would be greatley appreciated!

Matthijs almost 11 years

sigh THANK YOU!!!!!! All the tutorials used "#map_canvas" so I assumed i sould use the <canvas> :) Never thought of using a div instead of it, really really thanks :)
andilabs almost 10 years

awsome, how powerful is $('#map_canvas').gmap('refresh');