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.
Related
I create a Google map on my jQuery mobile site follow an example,
it has to use onload="initialize()" on the body tag to enable the map work,
now I want to display the map without using onload="initialize()" in the body tag, what should I change on the JS.
site Link: http://www.xuanyinwen.com/jquery/jquerymap/demos/test.html
code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<link rel="shortcut icon" href="http://computersforpeople.info/websites/images/favicon.ico">
<link rel="apple-touch-icon" sizes="72x72" href="http://computersforpeople.info/websites/Icons/apple-touch-icon-72x72.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="http://computersforpeople.info/websites/Icons/apple-touch-icon-114x114.png"/>
<link rel="icon" type="image/png" href="http://computersforpeople.info/websites/Icons/icon48.png" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://computersforpeople.info/websites/scripts/jquery-1.9.1.min.js"></script>
<script src="http://computersforpeople.info/websites/scripts/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="http://computersforpeople.info/websites/scripts/jquery/lib/klass.min.js"></script>
<link href="http://computersforpeople.info/websites/scripts/jquery/photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://computersforpeople.info/websites/scripts/jquery/code.photoswipe.jquery-3.0.4.min.js"></script>
<script type="text/javascript" src="http://computersforpeople.info/websites/scripts/jquery/lib/klass.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$('a').live('click', function() {
var $this = $(this);
if ( !$this.attr('rel') || $this.attr('rel') != 'external' )
$(document.getElementById( $this.attr('href') )).remove();
});
});
</script>
<style type="text/css">
<!--
.style1 {font-size: large}
-->
</style>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div data-role="page" data-add-back-btn="true" data-back-btn-text="Back" >
<div data-role="header" >
<h1>test</h1>
<div align="center">
</div>
</div>
<ul data-role="listview" data-inset="true" data-filter="false">
<div data-role="collapsible-set" style="padding-left: 10px; padding-bottom: 10px;">
<ul data-role="listview" data-filter="false" id="test-more" >
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
var address ="6 Westbury Crescent Remuera NZ";
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
if (geocoder) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
map.setCenter(results[0].geometry.location);
var infowindow = new google.maps.InfoWindow(
{ content: '<b>'+address+'</b>',
size: new google.maps.Size(600,400)
});
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title:address
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
} else {
alert("No results found");
}
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
</script>
<div data-role="collapsible" data-collapsed="false">
<h3>Map</h3>
<p>
<div align="center"><font size="2" color="#0000AA" face="Verdana, Arial, Helvetica, Sans-Serif"><b>
<div id="map_canvas" style="width: 300px; height: 200px"></div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-162157-1";
urchinTracker();
</script>
</b></font>
<font size="2" face="Arial, Helvetica, sans-serif">
<br>
<strong>Map location not guaranteed</strong> </font> </div>
</p>
</div>
</div>
</ul> <br />
<li>Contact Geoff Duncan</li>
</ul>
</div>
<div data-role="page" id="contact_us" data-title="Contact Us">
<div data-role="header">
<h1></h1>
</div>
</body>
</html>
If you don't want to use onload="initialize()" then you have to call initialize() yourself. For example in $(document).ready
$(document).ready(function () {
initialize();
});
There are a few other issues in your code as well. I've fixed them and here is a fiddle with your code fixed a bit. JSFiddle.net
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');
});
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');
}
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.
I have 2 javascripts registered to a page. One being for google maps api and the other being the initialization function to get the map loaded and created. Now whichever one I put first will successfully work, but whichever I put second will not load properly. So If i put the googleapi first, firebug will tell me initialize doesn't exist and vise versa. So how can i get both to be loaded successfully. Below is the page and JS
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false" />
<script type="text/javascript">
function initialize() {
var myLatLng = new google.maps.LatLng(43.652073, -79.382293);
var myOptions = {
zoom: 8,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
<asp:ContentPlaceHolder ID="Header" runat="server">
<ucHead:UC_Header runat="server" ID="UC_Header" />
</asp:ContentPlaceHolder>
</head>
<body onload="initialize()">
<div class="sidePanel">
<ucMenu:UC_Menu runat="server" ID="UC_Menu" />
</div>
<div class="mainContent">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
</body>
</html>
You must close your script tags...
You cannot do this:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false" />
It must look like this:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false" ></script>
You need a </script> tag after the googleapis.com script tag.
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false" /></script>