Having a bit of trouble placing a map within data-role="content" while using Google Maps v3 and JQuery. No errors show in the console so I am having a hard time debugging. No map shows up on the screen.
Here are my two files:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, width=device-width, user-scalable=no" />
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?&sensor=true"></script>
<script type="text/javascript" src="js/mapload.js"></script>
</head>
<body>
<div data-role="page" id="map">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<div id="map-canvas"></div>
</div>
</div>
</body>
</html>
mapload.js
function initialize()
var mapOptions = {
center: new google.maps.LatLng(49,-8),
zoom: 15,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
This gave me some insight but didn't complete answer my question.
EDIT: SOLUTION
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key={REPLACE THE BRACKETS AND THIS TEXT WITH YOUR API KEY}&sensor=true"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
</head>
<body>
<script type="text/javascript">
$(document).on('pageinit', '#index',function(e,data){
var map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(11.618044,-34.823347),
zoom: 15,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
});
</script>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
</div>
<div data-role="content" id="content" style="padding:0;position:absolute;top:40px;right:0;bottom:40px;left:0;">
<div id="map_canvas" style="height:100%"></div>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
<h3>
First Page
</h3>
</div>
</div>
</body>
</html>
There's only one available way of using Google maps with jQuery Mobile. Because jQuery Mobile is specific window load can't be used to initialize the map.
Specifically correct height is needed to initialize the map successfully and it can ONLY be done during the jQuery Mobile pageshow page event. If you want to find out more about jQuery Mobile page events and why is pageshow event important for plugin initialization take a look at my private blog ARTICLE. Or you can find it HERE.
Let me make this story short, here's a working example: http://jsfiddle.net/Gajotres/pkZHg/
And here's a javascript and CSS used:
Javascript
$(document).on('pageinit', '#index',function(e,data){
var map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(42.618044,-87.823347),
zoom: 15,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
});
CSS
#content {
padding: 0;
position : absolute !important;
top : 40px !important;
right : 0;
bottom : 40px !important;
left : 0 !important;
}
load mapload.js at the end of the html
<div data-role="page" id="map">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<div id="map-canvas"></div>
</div>
</div>
<script type="text/javascript" src="js/mapload.js"></script>
the DOM is not ready yet when you are calling the map functions
the other error might be CSS styling.. you could try this
a set width and height
`
#map-canvas {
width: 480px;
height: 640px;
}
`
Related
I am developing an application and this chrome extension is part of that web application. Whenever user launches this extension it should display a map with predefined markers. Here is my sample code which I wrote test.html
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="loading">
<div>
<img src="img/sunny.png" />
<p>Getting Data From Server</p>
</div>
</div>
<div id="wrapper">
<div id="weather"></div>
<div id="googleMap" style="width:500px;height:380px;"></div>
</div>
</body>
</html>
Main.js
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('weather.html', {
id: 'weather',
innerBounds: {
height: 450,
width: 300,
},
resizable: true
});
});
It opens a popup window but doesn't load map. While this html file is working perfectly when I open it directly in a browser.
I'm experiencing the H1 heading (first HTML element on page) being corrupted on a page with Google Map API v3 (using infobox as well). The text is being replaced with what appears to be garbage text and symbols.
The effect does not happen every time the page loads, just most times, and only in Chrome that I've found.
The H1 heading uses a TTF font loaded via CSS. If I remove this formatting, the problem does not occur.
CSS:
#font-face {
font-family: 'als';
src: url('/wedding/assets/alsscrp.ttf');
}
PHP / HTML:
<?php
$tpTitle="Venue";
$lastUpdate="13th December 2014";
include ($_SERVER['DOCUMENT_ROOT'].'/wedding/en/head-en.php');
?>
<style type="text/css">
html, body {height: 100%;}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=xxx"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<H1>Venue</H1>
<p>etc...
<div id="map-canvas"></div>
<div class="infobox-wrapper">
<div id="infoboxChurch" class="info">
<h1>St. Johanniskirche</h1>
</div>
</div>
<script type="text/javascript">
function initialize() {
var mapOptions, map;
mapOptions = {
center: new google.maps.LatLng(50.185,8.513),
zoom: 14,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// Church
var Church, infoboxChurch;
Church = new google.maps.Marker({
position: new google.maps.LatLng(50.180007, 8.508152),
map: map,
icon: {
scaledSize: new google.maps.Size(60,50),
url: "/wedding/assets/church.png",
anchor: new google.maps.Point(30, 25)
},
animation: google.maps.Animation.DROP,
title:"St. Johannskirche"
});
infoboxChurch = new InfoBox({
content: document.getElementById("infoboxChurch"),
disableAutoPan: false,
maxWidth: 150,
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1)
});
google.maps.event.addListener(Church, 'click', function() {
infoboxChurch.open(map, this);
map.panTo(loc);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
head-en.php :
<!DOCTYPE html>
<html lang="en_GB">
<head>
<title><?php echo $tpTitle ?></title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<meta charset="UTF-8">
<meta http-eqiuv="Content-Type" content="text/html;charset=utf-8">
<link rel="icon" href="/wedding/favicon.ico" type="image/x-icon">
<meta id="author" content="">
<meta id="description" content="<?php echo $pgDesc ?>">
<meta name="DC.date.issued" <?php echo 'content="'.$lastUpdate.'"';?> >
<meta name="viewport" content="width=device-width">
<link href='http://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="/wedding/assets/wedding.css">
<!-- jQuery loaded either externally or locally asap to allow selective js loading and light box -->
<script src="/assets/js/jquery-1.10.2.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"><\/script>')</script>
<!--[if lt IE9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- link change for current page -->
<script src="/assets/js/fade.js" type="text/javascript"></script>
</head>
<body>
<div id="top"></div>
<div id="little-head">
<ul>
<li><a class="page-link" href="/wedding/en/welcome.php">Welcome</a>
<li><a class="page-link" href="/wedding/en/contact.php">Contact us</a>
<li><a class="page-link" href="/wedding/en/timings.php">Venue</a>
<li><a class="page-link" href="/wedding/en/travel.php">Travel</a>
<li><a class="page-link" href="/wedding/en/hotels.php">Accomodation</a>
<li><a class="page-link" href="/wedding/en/faqs.php">FAQs</a>
</ul>
</div>
<div class="page">
<div id="seal">
</div>
Any ideas how to fix this?
My page has been loaded with google map but using Jquery i am hiding it. On click of button it should display my google map loaded in that page. but i am not able to see the full map,i.e. am seeing only a part of map.
Below is my code:-
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style id="my-css">
map,div[map] {
display: block;
width: 600px;
height: 400px
}
</style>
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="scripts/plunkr.js"></script>
<script src="scripts/app.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAAa24xicak8_ghHX58i7La7hRFh9iM79SNC94rOejOtdMRvQmJiBS6Uv5F_1BNSh9ZuSzFXyekHISgew"> </script>
<script
src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("map-canvas"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script>
$(document).ready(function(){
$("#maps12").hide();
$("button").click(function(){
$("#maps12").show();
});
});
</script>
<script src="../dist/ng-map.min.js"></script>
</head>
<body>
<div class="main">
<header>
DEMO
</header>
<section>
<div id="maps12">
<div id="map-canvas" style="width: 600px; height: 400px"></div>
</div>
</section>
<footer>
<button>click me</button>
</footer>
</div>
</body>
</html>
You're loading the Google maps using window's onload event and for a hidden element. Then you're again showing it so the maps is bit stuck to get resized.
So when you show the div, trigger the resize event of Google maps like
$(document).ready(function() {
$("#maps12").hide();
$("button").click(function() {
$("#maps12").show();
google.maps.event.trigger(map, "resize");
});
});
JSFiddle
I just check out the demos for jquery-ui-map here http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html#basic_map
This is exactly what I am trying to implement, its very basic, I just did as they did in the example but it doesn't seems working, I tested it on Chrome Desktop browser.
Here is the source:
<!DOCTYPE html >
<html >
<head>
<title>Map Search Page</title>
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.0.1.min.css" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map { height: 100%; width:100%; }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.map.full.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.map.services.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
var mobileDemo = { 'center': '57.7973333,12.0502107', 'zoom': 10 };
$('#home').live("pageinit", function () {
$('#map').gmap({ 'center': mobileDemo.center, 'zoom': 17 });
//$('#map').gmap('addMarker', { 'position': mobileDemo.center, 'animation': google.maps.Animation.DROP });
});
$('#home').live('pageshow', function () {
$('#map').gmap('refresh');
});
</script>
</head>
<body>
<section id="home" data-role="page">
<header data-role="header">
<h1>Multi Color Rating</h1>
</header>
<div class="content" style="width:100%; height:100%; " data-role="content">
<div id="map">
</div>
</div>
<footer data-role="footer">
<h2> All Rights Reserved © 2012</h2>
</footer>
</section>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
This shows only header and footers for now.
There is one important thing, when I give some height to the map div, it shows Static map image.
Just got it working now, Source code is fine. There was a problem because jQuery Mobile Map respond to Touch event.
In Chrome touch event are not enabled by default, so just turn on the Touch event in Chrome Console.
What I am trying to achieve from past 2 days is that - I could show a error msg on my jquery mobile page when there is no internet connection that 'Sorry, No internet connection.'
I have tried alot of stuff but none worked. Code below is now when last I tried by using try-catch block. But even this ain't helping. Following happens when i load the page in browser -
When Internet Connection Available - Map Loaded and works perfectly fine.
When No Internet Connection - I get blank page. without page header and footer. with some default grey background and that looks bad for my application. :(
Any kind of help is appreciable. I am still learning.
Code am using right now is given below -
<!DOCTYPE html>
<html>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="assets/css/master.css" type="text/css" media="screen" />
<link rel="stylesheet" href="assets/css/jquery.mobile.structure-1.0.min.css" type="text/css" media="screen" />
<link rel="stylesheet" href="assets/css/jquery.mobile.theme-1.0.min.css" type="text/css" media="screen" />
<script src="assets/js/jquery-1.6.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/js/jquery.mobile-1.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css">
#map_canvas { height: 330px; width: 100%; margin: 0px; padding: 0px }
</style>
</head>
<body>
<div data-role="header" data-theme="e">
<a data-icon="home" data-iconpos="notext" rel="external" href="index.html#page2"></a>
<h1>Maps</h1>
</div>
<div data-role="content" data-theme="d">
<div id="map_canvas">
<script type="text/javascript">
function initialize(){
try{
var locations = [
['Dr. Martin Luther King Library',37.3356,-121.8853, 4],
['Duncan Hall',37.3325,-121.8820, 5],
['Clark Hall',37.3360,-121.8827, 3],
['Event Center',37.3355,-121.8797, 2],
['Student Union',37.3369,-121.8806, 1]
];
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 16,
center: new google.maps.LatLng(37.3369,-121.8806),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++)
{
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
catch(err)
{
document.getElementById("map_canvas").text='Sorry, No internet connection.';
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</div>
</div>
<div data-role="footer" data-theme="e">
<h4>© blah-blah Inc.</h4>
</div>
</body>
</html>
script element triggers onerror event, when it can't load the script. You can add handler and track whether script loaded successfully:
<script src="http://maps.google.com/maps/api/js?sensor=false"
onerror="javascript:alert('No internet connection.')"></script>
UPDATE: You could try something like this:
<!DOCTYPE html>
<html>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="assets/css/master.css" type="text/css" media="screen" />
<link rel="stylesheet" href="assets/css/jquery.mobile.structure-1.0.min.css" type="text/css" media="screen" />
<link rel="stylesheet" href="assets/css/jquery.mobile.theme-1.0.min.css" type="text/css" media="screen" />
<script src="assets/js/jquery-1.6.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/js/jquery.mobile-1.0.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function initialize(){
//..... Your code with removed try/catch block
}
</script>
<style type="text/css">
#map_canvas { height: 330px; width: 100%; margin: 0px; padding: 0px }
</style>
</head>
<body>
<div data-role="header" data-theme="e">
<a data-icon="home" data-iconpos="notext" rel="external" href="index.html#page2"></a>
<h1>Maps</h1>
</div>
<div data-role="content" data-theme="d">
<div id="map_canvas"></div>
</div>
<div data-role="footer" data-theme="e">
<h4>© blah-blah Inc.</h4>
</div>
<script src="http://maps.google.com/maps/api/js?sensor=false" onload="javascript:initialize()" onerror="javascript:$('#map_canvas').html('No internet connection')"></script>
</body>
</html>