I'm fighting with this issue for a long time now and I can't find a proper solution. My goal is to display a Google map in my app. I'm developing my app with jQTouch and PhoneGap framework. Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<!-- INCLUDE CORDOVA -->
<script type="text/javascript" src="cordova-2.4.0.js"></script>
<!-- INCLUDE REMOTE DEBUGGING -->
<script src="http://debug.phonegap.com/target/target-script-min.js#photogap"></script>"
<!-- INCLUDE jQTouch -->
<link rel="stylesheet" href="./js/jqtouch-1.0-b4-rc/themes/css/jqtouch.css" id="jqtcss" />
<link rel="stylesheet" href="./css/index.css" />
<script type="text/javascript" src="./js/jqtouch-1.0-b4-rc/src/lib/zepto.min.js" charset="utf-8"></script>
<script type="text/javascript" src="./js/jqtouch-1.0-b4-rc/src/jqtouch.min.js" charset="utf-8"></script>
<!-- INCLUDE GOOGLE MAP -->
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyByqhQ9cCaXTKjBi2xEyp_HqQJwDl3YzRo&sensor=true">
</script>
<script type="text/javascript">
// Inicializuj jqTouch
$.jQTouch({
icon: 'jqtouch.png',
statusBar: 'black-translucent',
preloadImages: []
});
</script>
</head>
<body>
<div id="home" class="current">
<div class="toolbar">
<h1>Orionids</h1>
</div>
<ul class="rounded">
<li class="arrow">My Spots</li>
<li class="arrow">View On Map</li>
<li class="arrow">Choose From Library</li>
</ul>
<div id="spot_btn">
Spot Now!
</div>
<p id="quote">„Make a wish…“</p>
</div>
<div id="map">
<div class="toolbar">
<h1>Map View</h1>
<a class="back" href="#">Home</a>
</div>
<div id="map_canvas" style="width:100%; height:100%"></div>
<script>
// Incializuj Google Mapy
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
$('#map').bind('pageAnimationEnd', function() {
initialize();
});
</script>
</div>
</body>
</html>
The problem is that the map won't display no matter what I'm trying. I tried every hint that I found here on Stack Overflow but no luck so far. Any help would be appreciated.
You need to set the height of the container div in px instead of %
<div id="map_canvas" style="width:100%; height:100px"></div>
Try this and the map will show up. Also make sure the initialize method is being called.
Related
After searching through, Lot of people have suggest to use this google.maps.event.trigger(map, 'resize');
solution for hidden div, google map to render properly.As of now, only one third of map display and rest are greyed out.i have try inserting this code in each line to check. nothing work. Can some help me out.. am clueless !!
this is my js
$("#1").on("click",function(){
var map;
mapProp = { center:new google.maps.LatLng(40.73, -74.1841),
zoom:17,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
mapProp = new google.maps.LatLng(40.73, -74.1841)
var marker = new google.maps.Marker({
position: mapProp,
map: map,
icon: 'img/marker.png',
});
marker.setMap(map);
});
google.maps.event.addDomListener(window, 'load');
this is my html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/direction.css"/>
<link rel="stylesheet" type="text/css" href="css/transitions.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="css/transitions.js"></script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/apijs?v=3.exp&sensor=false"></script>
</head>
<body>
<div id="Home">
<div id="picture"> <img src="img.jpg" alt="logo"> </img></div>
<label><div id="select">Select</label></div>
<ul id="list"><hr>
<li id="b1" >Mall</li><hr>
<li id="b2" > city</li><hr>
<li id="b3" > office</li><hr>
<li id="b4" >Park</li><hr>
<li id="b5" >school</li><hr>
<li id="b6" > theater</li><hr>
</ul>
</div>
<div id="showmap">
<div class="back" id="Back">Back to Names</div>
<div id="googleMap"> </div>
</div>
<script type="text/javascript" src="js/scripts.js"></script>
</body>
</html>
solution
# Andrei Beziazychnyi
UpDate This solve everything
google.maps.event.addListener(map, "idle", function(){
var center = map.getCenter();
google.maps.event.trigger(map, 'resize');
map.setCenter(center);
});
After :
marker.setMap(map);
Only problem with is, my locaction is little off. had to bring down to see the marker.
Best option I know is to use following code:
google.maps.event.addListenerOnce(map, 'idle', function() {
google.maps.event.trigger(map, 'resize');
});
I have to refresh one time the page to load the map.
You can actually have a look in the link below:
http://metartestmobile.netau.net/template/listview.html
When i move this line (
<script src="http://code.jquery.com/jquery-1.11.0-beta2.js"></script> )
But i wanna use that line..
Here's is the file listview.html
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="themes/Bootstrap.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile.structure-1.4.0.min.css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<script src="http://code.jquery.com/jquery-1.11.0-beta2.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div data-role="page" id="my-page" >
<div data-role="content" data-theme="a">
<ul data-role="listview" data-inset="true" data-divider-theme="f">
<li data-role="list-divider">Weather</li>
<li data-icon="arrow-r"><a href="map.html" data-transition="flip" >Humidity-Rain</a></li>
</ul>
</div>
</div>
</body>
</html>
and the map.html
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<link rel="stylesheet" href="themes/Bootstrap.css">
<script type="text/javascript">
var infowindow;
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(38.822590,24.653320);
var myOptions = {
zoom: 6,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body onload="initialize()">
<div data-role="content">
<div id="map_canvas" ></div>
</div>
</body>
</html>
jquery mobile use ajax page load for default.
so change this
a href="map.html" data-transition="flip"
to
a href="map.html" data-transition="flip" rel="external"
then jquery mobile refresh hole page.
I have a script that opens a popup windows every time the page is loaded. The script is:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>ColorBox demo</title>
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
</head>
<body>
<h1>Hello, there!</h1>
<h2>This is some content</h2>
<p>The popup will open in five seconds</p>
<div class="test">
<p>testtest</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<script>
function openColorBox(){
$.colorbox({iframe:true, width:"60%", height:"60%", href: "http://www.sitepoint.com"});
}
setTimeout(openColorBox,0);
</script>
</body>
</html>
It works fine, but if I use it with google maps, the popup windows resizes unexpectedly and the background color that surrounds the popup disappears. The code is:
<!DOCTYPE html>
<html>
<html lang="ro">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
</script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100%; width: 100%; }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7_q4j3wbRGmQr3V-wtKZrlv7Uz_-G7Dk&sensor=true">
</script>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng( 44.4325, 26.1039),
zoom: 12
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<body>
<div id="map-canvas">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<script>
function openColorBox(){
$.colorbox({iframe:true, width:"30%", height:"30%", href: "http://www.sitepoint.com"});
}
setTimeout(openColorBox,0);
</script>
</body>
</html>
I can't figure out why it won't display properly. Does anyone have an idea?
Thanks a lot!
I'm not sure about that api colorbox but I would go with the jQuery ui modal and just customize the look from there. Run this code below. Note: I added the reference to the jQuery ui css and code base. Then I append a new div to the body with an iframe in it then call the dialog method on that element. Hope this helps.
<!DOCTYPE html>
<html>
<html lang="ro">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7_q4j3wbRGmQr3V-wtKZrlv7Uz_-G7Dk&sensor=true"></script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100%; width: 100%; }
</style>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng( 44.4325, 26.1039),
zoom: 12
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<body>
<div id="map-canvas">
</div>
<script>
function openColorBox(){
$('body').append("<div id='modalBox'><iframe style='height:300px; width:350px;' src='http://www.sitepoint.com'></iframe></div>");
$('#modalBox').dialog({
height:400,
width: 400
});
}
setTimeout(openColorBox,0);
</script>
</body>
</html>
I'm using the jQuery UI Map libary (https://code.google.com/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.net/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script>
<script src="https://d10ajoocuyu32n.cloudfront.net/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.com/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!
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.net/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.com/maps/api/js?sensor=true"></script>
<script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script>
<script src="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/min/jquery.ui.map.full.min.js"></script>
<script type="text/javascript" src="http://jquery-ui-map.googlecode.com/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.
With jQuery Mobile I can't get a popup with google maps loaded.
If I touch id="popupBasic" nothing pops up. Very strange, but if the google map api not is loaded the popup works!
>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Beer Me</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.css" />
<link rel="stylesheet" href="css/jquery.mobile.structure-1.3.1.css" />
<link rel="stylesheet" href="css/datepicker.css" />
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.1.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" charset="utf-8" src="js/map.js"></script>
<script type="text/javascript" charset="utf-8" src="markers.js"></script>
<script>
$.mobile.page.prototype.options.domCache = true ;
$.mobile.allowCrossDomainPages = true;
$(document).on('pageshow', '#map', function (event)
{
max_height();
$(document).on('click', '#myposition', function (event){
navigator.geolocation.getCurrentPosition(onSuccess, onError,{'enableHighAccuracy':true,'timeout':20000});
});
});
</script>
<script type="text/javascript" charset="utf-8" src="js/datepicker.js"></script>
<script type="text/javascript" charset="utf-8" src="js/datepicker.mobile.js"></script>
</head>
<body onload="onLoad()">
<div data-role="page" id="map">
<div data-role="header" data-theme="b">
Menu
<h1>Map Header</h1></div>
<div data-role="content" style="width:100%; height:100%; padding:0;">
<div data-role="popup" id="popupBasic">
<p>This is a completely basic popup, no options set.<p>
</div>
<div id="map_canvas" style="width:100%;height:100%"></div>
</div>
<div data-role="footer" data-theme="b" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#leftpanel" data-role="button" data-inline="true" data-icon="grid" >Date</a></li>
<li>Favs</li>
<li>My position</li>
<li>Open Popup</li>
</ul>
</div><!-- /navbar -->
</div>
</div>
</body>
</html>
Does someone have the same problem? I can't figure it out..
Greetz,
Frank
Working example: http://jsfiddle.net/Gajotres/GHZc8/
I have changed your example, popup will display if you click on a button #myposition.
HTML :
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script>
$(document).bind("mobileinit", function(){
$.mobile.page.prototype.options.domCache = true ;
$.mobile.allowCrossDomainPages = true;
});
</script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="map">
<div data-role="header" data-theme="b">
Menu
<h1>Map Header</h1>
</div>
<div data-role="content" style="width:100%; height:100%; padding:0;">
<div data-role="popup" id="popupBasic">
<p> This is popup</p>
</div>
<div id="map_canvas" style="width:100%;height:100%"></div>
</div>
<div data-role="footer" data-theme="b" data-position="fixed">
<div data-role="navbar">
<ul>
<li>
<a href="#leftpanel" data-role="button" data-inline="true" data-icon="grid" >Date</a>
</li>
<li>
Favs
</li>
<li>
My position
</li>
<li>
Open Popup
</li>
</ul>
</div>
<!-- /navbar -->
</div>
</div>
</body>
</html>
CSS :
#popupBasic {
width: 300px !important;
height: 300px !important;
}
Javascript:
$(document).on('pageshow', '#map', function (event) {
max_height();
$(document).on('click', '#myposition', function (event){
navigator.geolocation.getCurrentPosition(onSuccess, onError,{'enableHighAccuracy':true,'timeout':20000});
});
});
function max_height() {
var header = $.mobile.activePage.find("div[data-role='header']:visible");
var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
var viewport_height = $(window).height();
var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
content_height -= (content.outerHeight() - content.height());
}
$.mobile.activePage.find('[data-role="content"]').height(content_height);
}
function onSuccess(position) {
var minZoomLevel = 15;
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: minZoomLevel,
center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
function onError() {
alert('Error');
}