I am trying to build a JQuery Mobile application. I want this application to include a Google map in it. I was basing my implementation on the jquery-ui-map plugin. They have sample code available at .html#basic_map.
Even with that example, I still can't get a map to appear. I feel like I'm using the most basic code. Can somebody please tell me what I'm doing wrong? My code is shown below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns="">
<head>
<title></title>
<script type="text/javascript" src=""></script>
<script src=".7/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/resources/scripts/jquery.ui.map.full.min.js" />
</head>
<body>
<div id="result" data-role="page">
<div data-role="header"><h1>My App</h1></div>
<div data-role="content">
<div id="resultMap" style="height:200px; width:200px; background-color:Lime;">
</div>
</div>
</div>
<br /><br />
<script type="text/javascript">
$("#result").live("pageshow", function () {
$("#resultMap").gmap();
});
</script>
</body>
</html>
I am trying to build a JQuery Mobile application. I want this application to include a Google map in it. I was basing my implementation on the jquery-ui-map plugin. They have sample code available at http://jquery-ui-map.googlecode./svn/trunk/demos/jquery-google-maps-mobile.html#basic_map.
Even with that example, I still can't get a map to appear. I feel like I'm using the most basic code. Can somebody please tell me what I'm doing wrong? My code is shown below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://maps.google./maps/api/js?sensor=true"></script>
<script src="http://ajax.googleapis./ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/resources/scripts/jquery.ui.map.full.min.js" />
</head>
<body>
<div id="result" data-role="page">
<div data-role="header"><h1>My App</h1></div>
<div data-role="content">
<div id="resultMap" style="height:200px; width:200px; background-color:Lime;">
</div>
</div>
</div>
<br /><br />
<script type="text/javascript">
$("#result").live("pageshow", function () {
$("#resultMap").gmap();
});
</script>
</body>
</html>
- map() instead of gmap()? – Argiropoulos Stavros Commented Feb 5, 2012 at 19:16
3 Answers
Reset to default 1Ok. I'm doing it like this:
var home = new google.maps.LatLng(x, y);
$('#directions_map').live("pageshow", function() {
$('#map_canvas_1').gmap('refresh');
});
$('#directions_map').live("pagecreate", function() {
$('#map_canvas_1').gmap({'center': home, 'zoom':17 });
$('#map_canvas_1').gmap('addMarker', { 'position': home, 'animation' : google.maps.Animation.DROP } );
});
So please try:
- create the gmap on pagecreate
- only refresh on pageshow
- the marker is a bonus ;-)
let me know if this does the trick. It's from a working example of mine, so it should be ok. I think it's important you set up the gmap ahead of pageshow. If you think of JQM as a stage... pageshow would be right before lifting the curtain. Maybe too late for Google Magic. Pagecreate seems better...
Have you tried this:
jquery-mobile with google maps
I found it fairly easy to implement.
I also couldn't get the basic example from the jQuery UI Maps to work on the first try. After fiddling with the example in the "demos" folder of the jquery-ui-map-3.0-rc directory, I preened out all of the unnecessary html and javascript to dispaly a very basic map. Unfortunately the website has code snippets, rather than a full, working but minimalistic example.
You'll have to check that the references to the links and scripts are correct.
<!doctype html>
<html lang="en">
<head>
<title>Example with Google maps and jQuery - Google maps jQuery plugin</title>
<link type="text/css" rel="stylesheet" href="css/style.css" >
</head>
<body>
<div id="map_canvas" class="map rounded"></div>
<script type="text/javascript" src="http://maps.google./maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery-1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="../ui/jquery.ui.map.js"></script>
<script type="text/javascript">
$('#map_canvas').gmap({'center': '57.7973333,12.0502107', 'zoom': 10, 'disableDefaultUI':true, 'callback': function() {
var self = this;
self.addMarker({'position': this.get('map').getCenter() }).click(function() {
self.openInfoWindow({ 'content': 'Hello World!' }, this);
});
}});
</script>
</body>
</html>
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744989724a4604829.html
评论列表（0条）