Search jQuery

jQuery Forum

menges.lu..

jQuery Mobile and Google Maps just blank map

in jQuery Mobile • 9 years ago

Hello,

i want to add a map to my app with phonegap and jqm. I load the map asynchronous and got as callback the initialize function. But the map shows only grey, with the "satellite" controls and the google logo. Anyone can help?

this is my code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css" >
<link rel="stylesheet" href="css/styles.css" >
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<script type="application/javascript" src="js/fastclick.js"></script>
<script src="cordova.js"></script>
</head>
<body>
<div data-role="page" id="tellthedj">
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(48.89364, 2.33739),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</script>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyD020PHLa16-7aHO1Wo_sWXcDN_iYoWOBU&sensor=false&callback=initialize">
</script>
<script src="js/functions.js"></script>
<script>
$(document).off('pageshow', '#tellthedj').on('pageshow', '#tellthedj', function () {
});
</script>
<div data-role="content">
<div id="map_canvas" style="height:100px; width:100px;"></div>
</div>
</div>
</body>
</html>

Replies(2)

menges.lu..

Re: jQuery Mobile and Google Maps just blank map

9 years ago

Noone know about that problem??

watusiware

Re: jQuery Mobile and Google Maps just blank map

9 years ago

Did you search the forum? Google Maps has been addressed several times.

1. jquery.ui.map is a good solution. Although mainly meant for use with jQuery UI, it is also specifically designed to work with jQuery Mobile. There is some documentation that addresses jQuery Mobile specifically. It's much easier to use jquery.ui.map than to use the Google Maps API directly.

2. There are issues with the way that all Google Javascript APIs dynamically load JS code. It is not possible to load any of these APIs statically (and it's prohibited by the Terms of Service in any case) - you load an initial file, but then Google's JS loader loads stuff at unpredictable and uncontrollable times. So, it can be difficult to load these APIs on only a single page. It is best to just load in <head> and of course follow the rule that you should load the same CSS and JS on every page.

(2) really tends to be a problem only if you are trying to load the maps API only for a particular page. This is important if you are creating a native app using, say, PhoneGap, and you want the app to work offline. You wouldn't want to require loading a Google API at startup, but only if the user needs to use the map. It's better to sweep this problem under the rug during initial development, so you can initially get the map to work.

Top Reply

Response title

Attachments

jQuery Forum

jQuery Mobile and Google Maps just blank map

Replies(2)

Re: jQuery Mobile and Google Maps just blank map

Re: jQuery Mobile and Google Maps just blank map

Statistics

Tags

Actions