Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

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!

share|improve this question
1  
dont use .ready() with jQuery Mobile. You can fix this by wrapping your code inside $(document).on('pageshow', '#main', function () { your code here }); – Omar Jun 4 at 9:20
Hi, thanks for the reply, however the issue remains. I still don't see a map, just a grey square. – Matthijs Jun 4 at 9:45
make sure you're using correct code check this jquery-ui-map.googlecode.com/svn/trunk/demos/… – Omar Jun 4 at 9:57
As far as i can tell i am using the correct code (mostly from: code.google.com/p/jquery-ui-map/wiki/…) however if i use the code from your link i still get the same issue. – Matthijs Jun 4 at 10:05
1  
In that page, it uses .on('pageinit') event to load maps. you can use .on('pagebeforeshow') or .on('pageshow'). Does it work on a desktop browser? – Omar Jun 4 at 10:10
show 1 more comment

1 Answer

up vote 2 down vote accepted

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.

share|improve this answer
1  
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 :) – Matthijs Jun 4 at 11:10

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.