I'm doing rel="external" on the link that opens this page, so the DOM reloads which should rule out a lot of problems.
Nevertheless, with the following code I get a huge red background with a nice header and footer-- the map just doesn't initialize despite that the function is being called. Can anyone spot the problem? This bug has been holding me up forever; I've tried a million things including redesigning it as a multipage template without rel="external", but that didn't work either.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript">
$(function(){initializeMap(42,-73);});
function initializeMap(lat,lng) {
var latlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var crosshairLayer = new google.maps.KmlLayer('http://freezoo.alwaysdata.net/justcrosshair2.kml',
{preserveViewport: true});
crosshairLayer.setMap(map);
google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );
}
</script>
</head>
<body>
<div data-role="page" data-theme="e" data-add-back-btn="true" class="map1" id="testing">
<div data-role="header"><h1>Map Page</h1></div>
<div id="content" style="position:absolute; bottom:40px; top:40px; left:0px; right:0px; background:green;">
<div id="map_canvas" style="position:absolute; top:0px; bottom:0px; width:100%; background:red;"></div>
</div>
<div data-role="footer" style="position:absolute; bottom:0px; width:100%;">
<h1>Working!</h1>
</div>
</div>
</body>
</html>
Your code doesn't load the google maps script. Like this for example:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
Related
This is my complete View:
#{
ViewBag.Title = "Home";
}
<div style="width:100%; height:100%" id="map"></div>
<script defer="defer" type="text/javascript">
var map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", { layers: 'basic' });
map.addLayer(wms);
map.zoomToMaxExtent();
</script>
But when I run it nothing I can't see the map.
I made a HTML page in Notepad that looks like this:
<html>
<head>
<title>OpenLayers Example</title>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
</head>
<body>
<div style="width:100%; height:100%" id="map"></div>
<script defer="defer" type="text/javascript">
var map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
map.addLayer(wms);
map.zoomToMaxExtent();
</script>
</body>
</html>
And it works.
Why isn't the code being executed in ASP.NET?
I installed OpenLayers from NuGet and if I select OpenLayers and press F12 ('Go To Definition' it opens up OpenLayers.js so it seems to have been downloaded correctly).
EDIT:
The complete generated code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FIKA - Home</title>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<link href="/Content/css?v=bxomq82-FU9mU3eDX6m-kca-a2PFEz0RK2Z7mS-QmnY1" rel="stylesheet"/>
<script src="/bundles/modernizr?v=wBEWDufH_8Md-Pbioxomt90vm6tJN2Pyy9u9zHtWsPo1"></script>
</head>
<body>
<div class="container body-content">
<div style="width:100%; height:100%" id="map"></div>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script defer="defer" type="text/javascript">
var map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", { layers: 'basic' });
map.addLayer(wms);
map.zoomToMaxExtent();
</script>
<hr />
</div>
<script src="/bundles/jquery?v=FVs3ACwOLIVInrAl5sdzR2jrCDmVOWFbZMY6g6Q0ulE1"></script>
<script src="/bundles/bootstrap?v=2Fz3B0iizV2NnnamQFrx-NbYJNTFeBJ2GM05SilbtQU1"></script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"0ea737fab0f240fab62a7978c5db4fa7"}
</script>
<script type="text/javascript" src="http://localhost:60314/4457514eae394a96a55c4c6c386b7942/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
Your issue occurs because in the complete generated code you have the HTML5 doctype where in your working demo you do not have a doctype. That difference occurs for the browser to render differently the height:100%; property.
You need to set the height in pixels before executing your code.
function setMapHeight() {
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0];
document.getElementById('map').style.height = (w.innerHeight || e.clientHeight || g.clientHeight) + 'px';
}
setMapHeight();
window.onresize = setMapHeight; // Add this code to fix height if window resizes
var map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", { layers: 'basic' });
map.addLayer(wms);
map.zoomToMaxExtent();
I am tryign to implement a random answer on a page loaded via an ajax call. I am using jquery mobile inclusive layout. Therefore I added a simple java script in the div data-roll container and initialized it via $(document).live or $(document).on or $(document).bind, like it should be according to many answers or suggestions here. Everything works fine, when I use a normal alert function. Like this
<script>
$(document).live('pageinit', "#answerPage", function (event) {
alert("Page Initialized");
});
</script>
Also my script works fine, when I add it to a normal html page.
So when I instead using an alert I use function getanswer() it doesn`t work. What do I do wrong here? Thanks for your help.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div data-role="page" id="answerPage" data-theme="b" data-add-back-btn="true">
<script>
$(document).on("pageinit", "#answerPage", function(event) {
function getanswer() {
var r_text = new Array ();
r_text[0] = "A";
r_text[1] = "B";
r_text[2] = "C";
r_text[3] = "D";
r_text[4] = "E";
r_text[5] = "F";
r_text[6] = "G";
var i = Math.floor(7*Math.random());
document.getElementById("ShowAnswer").innerHTML = r_text[i];
};
});
</script>
<div data-role="header" data-position="fixed" data-theme="b">
<div id="ShowAnswer"> </div>
</div>
</div>
</body>
</html>
you forgot to call your function getanswer()...
see working example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="answerPage" data-theme="b" data-add-back-btn="true">
<div data-role="header" data-position="fixed" data-theme="b">
<div id="ShowAnswer"></div>
</div>
</div>
<script>
$(document).on("pageinit", "#answerPage", function(event) {
getanswer();
});
function getanswer() {
var r_text = new Array ();
r_text[0] = "A";
r_text[1] = "B";
r_text[2] = "C";
r_text[3] = "D";
r_text[4] = "E";
r_text[5] = "F";
r_text[6] = "G";
var i = Math.floor(7*Math.random());
document.getElementById("ShowAnswer").innerHTML = r_text[i];
};
</script>
</body>
</html>
When run, if I click the link at the bottom of the index page to get to the map page, I see the map briefly, filling a quarter of the screen, before it vanishes. What am I doing wrong?
Here is the code for the index page, which creates the map page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
<script type="text/javascript">
function initialize(){
if(!window.navigator.onLine){
alert("An internet connection is required to use the MetPetDB App. Please find a connection and reopen the app.");
var element = document.getElementById("mainPage");
element.parentNode.removeChild(element);
document.getElementById("mainBody").innerHTML = "<p>An internet connection is required to use this app.</p>";
}
}
</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript">
// When map page opens get location and display map
$('.page-map').live("pagecreate", function() {
initializeMap(42,-73);
});
function initializeMap(lat,lng) {
var latlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
}
</script>
</head>
<body id="mainBody" onload="initialize()">
<div id="mainPage" data-role="page" data-theme="e">
<div data-role="header">
<!-- <img src="headerlogo.png" />-->
<br />
<p style="text-align:center">To begin searching for samples, select one of the following search methods.</p>
</div>
<div data-role="content" style="height: 100%;">
<a data-role="button" data-theme="a" href="useMyLocation.html">Use My Location</a>
<a data-role="button" data-theme="a" href="InputCoordinates.html">Input Coordinates</a>
<a data-role="button" data-theme="a" href="selectRegion.html">Select Region</a>
Testing
</div>
</div>
</body>
</html>
And here is the map page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
</head>
<body>
<div data-role="page" data-theme="e" class="page-map" style="width:100%; height:100%;">
<div data-role="header"><h1>Map Page</h1></div>
<div data-role="content" style="width:100%; height:100%; padding:0;">
<div id="map_canvas" style="width:100%; height:100%;"></div>
</div>
</div>
</body>
</html>
The following code works: jsfiddle
I took your code, simplified it (using a single page template instead of the multi page one, but just to make it easier for jsfiddle) and moved all scripts inside the head.
Also be careful with phonegap, you should handle the onDeviceReady event, and not the body onload event. Even then there's a different method there to check if you're online.
All I'm trying to do is embed a goggle map in the content tag of a jQuery mobile page and I can't get it to appear on the page. I'm guessing it's a little mistake but I've been wrestling with this for a while and any help would be appreciated.
<head>
<style type="text/css">
#map_canvas {
height: 256px;
width: 384px;
margin-top: 0.6em;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="fbObj1.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="PATH_TO_PLUGIN/jquery.ui.map.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
/>
</head>
<body>
<script type="text/javascript">
geocoder = new google.maps.Geocoder();
var map = new google.maps.Map($("div#map_canvas"), {
center: new google.maps.LatLng(37.371940, -122.116470),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
map.index = 2;
</script>
<div data-role="page">
<div data-role="header"></div>
<div data-role="content">
<div id="map_canvas"></div>
</div>
<div data-role="footer" data-position="inline"></div>
</div>
</body>
The following code is working for me
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE"></script>
<script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(37.371940, -122.116470),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
}
</script>
<body onload="initialize()">
The html below generates a google map. However, when I hover over the map, the cursor does not change from an arrow to a hand like the one in the jquery mobile example http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html#basic_map. I am testing on Safari under the iPhone user agent.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="shortcut icon" href="/assets/favicon.ico" type="image/x-icon" />
<link href="/assets/gmaps4rails.css" media="screen" rel="stylesheet" type="text/css" />
<script src="/assets/gmaps4rails/googlemaps.js" type="text/javascript"></script>
</head>
<body>
<div class="container" id="container">
<div class="page" data-role="page">
<header data-role="header" data-position="inline" data-theme="b" data-position="fixed"></header>
<div data-role="content">
<div id="map" class="gmaps4rails_map"></div>
</div>
<footer data-role="footer" data-theme="b">
</footer>
<script type="text/javascript" src="//maps.google.com/maps/api/js?v=3.5&sensor=false&libraries=geometry"></script>
<script type="text/javascript" src="//google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox_packed.js"></script>
<script type="text/javascript" src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.5/src/markerclusterer_packed.js"></script>
<script type="text/javascript" src="//google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/src/richmarker-compiled.js"></script>
<script type="text/javascript" charset="utf-8">
Gmaps.map = new Gmaps4RailsGoogle();
Gmaps.load_map = function() {
Gmaps.map.map_options.center_latitude = "37.7668452";
Gmaps.map.map_options.center_longitude = "-122.2537803";
Gmaps.map.map_options.disableDefaultUI = true;
Gmaps.map.map_options.draggable = true;
Gmaps.map.initialize();
Gmaps.map.markers = [{"title":"Test","lat":"37.7668452","lng":"-122.2537803"}];
Gmaps.map.create_markers();
Gmaps.map.adjustMapToBounds();
Gmaps.map.callback();
};
window.onload = function() { Gmaps.loadMaps(); };
</script>
</div>
</div>
</body>
</html>
What is the code missing and/or is Google-Maps-for-Rails mobile enabled?
Thanks!
Google-Maps-for-Rails is mobile enabled. The map that appears on mobile is an image and can't be dragged on a desktop safari browser.