admin管理员组文章数量:1328426
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
1 Answer
Reset to default 5Solution
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
版权声明：本文标题：javascript - Google maps with JQuery Mobile and jquery-ui-map - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742223253a2435587.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论