Geek Answers Handbook

How can I display a google google map using jQuery Mobile?

The following code displays strange output. I should see a full-screen mobile map. But for some reason, it only shows part of the screen. I use jquery.ui.map for matching.

<!DOCTYPE html> <html> <head> <title>My Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/jquery.mobile-1.1.0.min.css" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script src="js/jquery-1.7.1.min.js"></script> <script src="js/jquery.mobile-1.1.0.min.js"></script> <script type="text/javascript" src="js/jquery.ui.map.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>My Title</h1> </div><!-- /header --> <div data-role="content" id="map_canvas" name="contentMain"> </div><!-- /content --> </div><!-- /page --> <script> $('#map_canvas').gmap().bind('init', function() { // This URL won't work on your localhost, so you need to change it // see http://en.wikipedia.org/wiki/Same_origin_policy $.getJSON( 'http://jquery-ui-map.googlecode.com/svn/trunk/demos/json/demo.json', function(data) { $.each( data.markers, function(i, marker) { $('#map_canvas').gmap('addMarker', { 'position': new google.maps.LatLng(marker.latitude, marker.longitude), 'bounds': true }).click(function() { $('#map_canvas').gmap('openInfoWindow', { 'content': marker.content }, this); }); }); }); }); </script> </body> </html>

Output:

enter image description here

Thanks in advance.

+7
source share
4 answers

The solution for my mobile site was to set the position:absolute; width:100%; height:100%; styles position:absolute; width:100%; height:100%; position:absolute; width:100%; height:100%; for div canvas. You can use the top and bottom styles to leave room for toolbars.

+22
source

Headers and footers are inevitable if you use jQuery. I set {data-position="fixed" data-fullscreen="true"} for the header and footer and also set html { height: 100% } body { height: 100%; margin: 0; } #map { position:absolute; width: 100%; height: 100%; padding: 0; } html { height: 100% } body { height: 100%; margin: 0; } #map { position:absolute; width: 100%; height: 100%; padding: 0; } html { height: 100% } body { height: 100%; margin: 0; } #map { position:absolute; width: 100%; height: 100%; padding: 0; } , so both the menu and the map interact perfectly on the mobile device.

+1
source

The canvas of the container and card should be 100% of the width and height.

On jQuery mobile website their structure is:

 <div data-role="page" id="map-page" data-url="map-page"> <div data-role="header" data-theme="c"> <h1>Maps</h1> </div> <div data-role="content" id="map-canvas"> <!-- map loads here... --> </div> </div>

And CSS:

 #map-page, #map-canvas { width: 100%; height: 100%; padding: 0; }

From here: http://view.jquerymobile.com/master/demos/examples/maps/geolocation.php

0
source

I talked a bit with this, and I managed to find the perfect solution. It is intended for pages with or without a headline. It ideally positions the map in the space between the title and the bottom of the page (or on the entire page if the title is missing), for any resolution and any title height.

This solution requires both CSS and JS if the page has a title, and CSS only if the page has no title.

HTML

 <div data-role="page" id="mapPage"> <div data-role="header"`> <!-- your header HTML... --> </div> <div data-role="content"> <div id="map-canvas"></div> <p id="nogeolocation"></p> </div> </div>

CSS

 #map-canvas { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } /* eliminates scrollbars in map infowindow (optional) */ #mappopup { line-height: 1.35; overflow: hidden; white-space: nowrap; }

Js

 var mapPageHeader = $("#mapPage .ui-header").eq(0); if(mapPageHeader.length > 0) { var headerHeight = mapPageHeader.outerHeight(); $("#map-canvas").css({ 'height': ($(window).height() - headerHeight + 1) + 'px', 'top': headerHeight - 1 }); }
0
source

More articles:


All Articles