admin管理员组

文章数量:1335380

I'm using the jQuery UI Map libary (/) 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=".3.1/jquery.mobile-1.3.1.min.css">
  <script src=".9.1.min.js"></script>
  <script src=".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=""></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:

.png

Any help would be greatley appreciated!

I'm using the jQuery UI Map libary (https://code.google./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/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
  <script src="https://d10ajoocuyu32n.cloudfront/jquery-1.9.1.min.js"></script>
  <script src="https://d10ajoocuyu32n.cloudfront/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./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 edited Jun 4, 2013 at 9:40 Matthijs asked Jun 4, 2013 at 9:18 MatthijsMatthijs 1,1522 gold badges14 silver badges30 bronze badges 6
  • 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 Commented Jun 4, 2013 at 9:20
  • Hi, thanks for the reply, however the issue remains. I still don't see a map, just a grey square. – Matthijs Commented Jun 4, 2013 at 9:45
  • make sure you're using correct code check this jquery-ui-map.googlecode./svn/trunk/demos/… – Omar Commented Jun 4, 2013 at 9:57
  • As far as i can tell i am using the correct code (mostly from: code.google./p/jquery-ui-map/wiki/…) however if i use the code from your link i still get the same issue. – Matthijs Commented Jun 4, 2013 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 Commented Jun 4, 2013 at 10:10
 |  Show 1 more ment

1 Answer 1

Reset to default 5

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/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./maps/api/js?sensor=true"></script>              
        <script src="https://d10ajoocuyu32n.cloudfront/jquery-1.9.1.min.js"></script>
        <script src="https://d10ajoocuyu32n.cloudfront/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
        <script type="text/javascript" src="http://jquery-ui-map.googlecode./svn/trunk/ui/min/jquery.ui.map.full.min.js"></script>
        <script type="text/javascript" src="http://jquery-ui-map.googlecode./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.

本文标签: javascriptGoogle maps with JQuery Mobile and jqueryuimapStack Overflow