<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<script type="text/javascript" src="/js/lib.min.js"></script>
<style type="text/css">
body{margin: 0;}
</style>
</head>
<body>
<button id="btn1" style="width: 200px; height: 100px;">隐藏</button>
<button id="btn2" style="width: 200px; height: 100px;">显示</button>
<div id="box" style="display none;">
<canvas id="canvas"></canvas>
</div>
</body>
<script type="text/javascript">
$(function() {
var _canvas = document.getElementById("canvas");
_canvas.width = $(document).width();
_canvas.height = $(document).height() - 150;
_stage = new createjs.Stage(_canvas);
var ss = new createjs.SpriteSheet({
images: ["/app/resource/image/trick/animation/cow_basketball/ploughR.png", "/app/resource/image/trick/animation/cow_basketball/ploughL.png"],
frames: {regX: 0, regY: 0, width: 374, height: 200, count: 8},
animations: {right: [0, 3], left: [4, 7]}
});
var bitmap = new createjs.BitmapAnimation(ss);
bitmap.x = 0;
bitmap.y = 0;
bitmap.scaleX = bitmap.scaleY = 1;
ss.getAnimation("right").next = "right";
ss.getAnimation("left").next = "left";
bitmap.gotoAndPlay("right");
_stage.addChild(bitmap);
createjs.Ticker.addEventListener("tick", _tick);
createjs.Ticker.setFPS(10);
var right = true;
function _tick() {
_stage.update();
if(!!right) {
bitmap.x = bitmap.x + 10;
} else {
bitmap.x = bitmap.x - 10;
}
if(bitmap.x > $(document).width()) {
right = false;
bitmap.gotoAndPlay("left");
}
if(bitmap.x < -bitmap.spriteSheet._frameWidth) {
right = true;
bitmap.gotoAndPlay("right");
}
};
$("#btn1").on("click", function() {
$("#box").hide();
});
$("#btn2").on("click", function() {
$("#box").show();
});
});
</script>
</html>
in this case with android samsung phone has some problem like below:
1.click btn1 to hide the div
2.then click btn2 to show the div(normally should be a dynamic picture)
but at this time the page has a static picture stay there more
so,my problem is how this bug appears and how to avoid this bug?
This doesn't look like it is easeljs-related, the only bug that I noticed in your code was:
<div id="box" style="display none;">
should be:
<div id="box" style="display: none;">
So you were missing a colon there, maybe that helps.
Related
Below is the sample for audio player:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>audio.js</title>
<script src="./audiojs/audio.min.js"></script>
<link rel="stylesheet" href="./includes/index.css" media="screen">
<script>
audiojs.events.ready(function() {
audiojs.createAll();
});
</script>
</head>
<body>
<header>
<h1>audio.js</h1>
</header>
<audio src="http://kolber.github.io/audiojs/demos/mp3/juicy.mp3" preload="auto"></audio>
</body>
</html>
With this, I want to add some constraints like don't want to show the play button.Instead it will automatically play after 10 secs and it can play only once. How can I do with this. If anyone knows solution please help me to get out of this issue. Reference. https://kolber.github.io/audiojs/
You can hide the play/pause button by changing its style of .play-pause to display:none
Set autoplay to false to avoid playback at load and use setTimeout to play after 10 sec.
Refer below code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>audio.js</title>
<script src="./audiojs/audio.min.js"></script>
<link rel="stylesheet" href="./includes/index.css" media="screen">
<style>
.play-pause {
display: none;
}
.scrubber {
display: none;
}
.audiojs {
width: 110px;
}
.audiojs .time {
border-left: none;
}
</style>
</head>
<body>
<header>
<h1>audio.js</h1>
</header>
<audio src="http://kolber.github.io/audiojs/demos/mp3/juicy.mp3" id="player"></audio>
<label id="audio_stats"></label>
<script>
var element = document.getElementById("player");
var settings = {
autoplay: false,
loop: false,
preload: true,
swfLocation: 'audiojs/audiojs.swf',
trackEnded: function (e) {
document.getElementById("audio_stats").innerText = "Track Ended...";
}
}
audiojs.events.ready(function () {
var a = audiojs.create(element, settings);
var count = 11;
var counter = setInterval(timer, 1000);
function timer() {
count = count - 1;
if (count <= 0) {
clearInterval(counter);
a.play();
document.getElementById("audio_stats").innerText = "Playing...";
return;
}
document.getElementById("audio_stats").innerText = "Will Start in " + count + " sec.";
}
});
</script>
</body>
</html>
Getting error
"11-13 13:10:55.470: E/Web Console(9799):
Uncaught Error: TYPE_MISMATCH_ERR: DOM Exception 17 at
file:///android_asset/www/index.html:304"
when converting html div content to canvas in android with phonegap.
It is working properly on browser. Any help will be appreciated. I am using jQuery-1.9.1, jQuery-UI.
code snippet:
// html file
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="resourcess/css/jquery-ui.css" />
<script src="js/jquery-1.9.1.js"></script>
<script src="js/html2canvas.js"></script>
<script src="js/jquery.plugin.html2canvas.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="cordova-2.5.0.js"></script>
<link rel="stylesheet" href="resourcess/css/style.css" />
</head>
<body>
<div class="imag-container">
<div class="dragImg">
<div id="dropHere"></div>
<div id="click" > click </div>
<div id="img-check">check</div>
<canvas id="canvas" width="100" height="100">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</body>
// script
$(function(){
//Make every clone image unique.
var counts = [0];
var resizeOpts = {
handles: "all" ,autoHide:true
};
$(".dragImg").draggable({
helper: "clone",
//Create counter
start: function() { counts[0]++; }
});
$("#dropHere").droppable({
drop: function(e, ui){
if(ui.draggable.hasClass("dragImg")) {
$(this).append($(ui.helper).clone());
//Pointing to the dragImg class in dropHere and add new class.
$("#dropHere .dragImg").addClass("item-"+counts[0] );
$("#dropHere .img").addClass("imgSize-"+counts[0]);
//Remove the current class (ui-draggable and dragImg)
$("#dropHere .item-"+counts[0]).removeClass("dragImg ui-ggable ui-draggable-dragging");
$(".item-"+counts[0]).dblclick(function() {
$(this).remove();
});
make_draggable($(".item-"+counts[0]));
$(".imgSize-"+counts[0]).resizable(resizeOpts);
}
}
});
var zIndex = 0;
function make_draggable(elements)
{
elements.draggable({
containment:'parent',
start:function(e,ui){ ui.helper.css('z-index',++zIndex); },
stop:function(e,ui){
}
});
}
$('#click').click(function(){
//Some code
var domElement = document.getElementById('dropHere');
setTimeout(function() {
var canvas = document.getElementById("canvas"),
context = canvas.getContext('2d');
html2canvas(domElement, {
onrendered: function (domElementCanvas) {
var canvas = document.getElementById("canvas");
canvas.getContext('2d').drawImage(domElementCanvas, 0, 0, 50, 50,0,0,100,100);
}
});
}, 10000);
});
});
I am trying to wrote an app using phonegap and jquerymobile.
My app draw 4 image from a Image array and when i touch on 1 image, 1 page is called to display the image in full screen, but it's dont draw like i want and just 2 images is display in another page, other images is still don't display.
Please, check my code and tell me what wrong i am.
thanks for read.
this is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>ListApp</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.1.1.min.js"></script>
<script src="ui/jquery-ui.js"></script>
<script src="cordova-2.5.0.js"></script>
<style>
img.fullscreen {
max-height: 100%;
max-width: 100%;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
var drawCanvasImage = function (ctx,grid,row,x,y,w,h) {
return function() {
// window.alert('row:' + row);
ctx.drawImage(grid[row], x, y,w,h);
}
}
var sizedWindowWidth = ($(window).width() - 34);
var sizedWindowHeight = ($(window).height() - 34);
var r1=0;
var r2=0;
var mag = ["img/a1.png","img/a2.png","img/a3.png","img/a4.png","img/a5.png"];
var grid = new Array();
var sImg = new Array();
$("#canvas1").width(sizedWindowWidth);
$("#canvas1").height(sizedWindowWidth*3/10);
$("#canvas2").width(sizedWindowWidth);
$("#canvas2").height(sizedWindowWidth*1/10);
$("#canvas3").width(sizedWindowWidth);
$("#canvas3").height(sizedWindowWidth*3/10);
$("#canvas4").width(sizedWindowWidth);
$("#canvas4").height(sizedWindowWidth*1/10);
$("#canvas5").width(sizedWindowWidth/2 - 10);
$("#canvas5").height(sizedWindowWidth*1/10);
$("#canvas6").width(sizedWindowWidth/2 - 10);
$("#canvas6").height(sizedWindowWidth*1/10);
$("#canvas7").width(sizedWindowWidth/2 - 10);
$("#canvas7").height(sizedWindowWidth*1/10);
$("#canvas8").width(sizedWindowWidth/2 - 10);
$("#canvas8").height(sizedWindowWidth*1/10);
var canvas1 = $("#canvas1").get(0);
var canvas2 = $("#canvas2").get(0);
var canvas3 = $("#canvas3").get(0);
var canvas4 = $("#canvas4").get(0);
if(canvas1 && canvas2 && canvas3 && canvas4)
{
var ctx1 = canvas1.getContext('2d');
var ctx2 = canvas2.getContext('2d');
var ctx3 = canvas3.getContext('2d');
var ctx4 = canvas4.getContext('2d');
if(ctx1 && ctx2 && ctx3 && ctx4)
{
ctx1.canvas.width = sizedWindowWidth;
ctx1.canvas.height = sizedWindowWidth*3/10;
ctx2.canvas.width = sizedWindowWidth;
ctx2.canvas.height = sizedWindowWidth*1/10;
ctx3.canvas.width = sizedWindowWidth;
ctx3.canvas.height = sizedWindowWidth*3/10;
ctx4.canvas.width = sizedWindowWidth;
ctx4.canvas.height = sizedWindowWidth*1/10;
$("#canvasDraw").click(function(){
for(var r=0;r<2;r++) {
var x = 0;
var y = r*sizedWindowWidth/2;
var w = sizedWindowWidth/2 - 5;
var h = sizedWindowWidth*3/10;
sImg[r] = Math.floor((Math.random()*4)+0);;
grid[r] = new Image();
grid[r].onload = drawCanvasImage(ctx1,grid,r,y,x,w,h);
ctx2.fillStyle = "#00ff00";
ctx2.fillRect(y, x, w, h/3);
ctx4.fillStyle = "#00ff00";
ctx4.fillRect(y, x, w, h/3);
grid[r].src = mag[sImg[r]];
}
for(var d=0;d<2;d++) {
var x = 0;
var y = d*sizedWindowWidth/2;
var w = sizedWindowWidth/2 - 5;
var h = sizedWindowWidth*3/10;
sImg[d+2] = Math.floor((Math.random()*4)+0);;
grid[d] = new Image();
grid[d].onload = drawCanvasImage(ctx3,grid,d,y,x,w,h);
grid[d].src = mag[sImg[d+2]];
}
for (var j=0;j<mag.length;j++) {
if(sImg[0] == j){
$('#img1').attr("src",mag[j]);
}
if(sImg[1] == j){
$('#img2').attr("src",mag[j]);
}
if(sImg[2] == j){
$('#img3').attr("src",mag[j]);
}
if(sImg[3] == j){
$('#img4').attr("src",mag[j]);
}
}
});
document.getElementById("mycanvas").addEventListener("touchstart", touchHandler, false);
document.getElementById("mycanvas").addEventListener("touchmove", touchHandler, false);
document.getElementById("mycanvas").addEventListener("touchend", touchHandler, false);
var x;
var y;
function touchHandler(e) {
if (e.type == "touchstart") {
console.log("touch start! x: " + x + "y: " + y);
e.preventDefault();
x = event.touches[0].pageX;
y = event.touches[0].pageY;
if (x>10 && x<150 && y>10 && y<140) {
$('#anh1').show();
}
if (x>166 && x<298 && y>10 && y<140) {
$('#anh2').show();
}
if (x>16 && x<150 && y<190 && y>265) {
$('#anh3').show();
}
if (x>166 && x<298 && y<190 && y>265) {
$('#anh4').show();
}
} else if (e.type == "touchmove") {
console.log("touch move!");
e.preventDefault();
} else if (e.type == "touchend" || e.type == "touchcancel") {
console.log("touch end!");
e.preventDefault();
}
}
}
}
$('#showimg1').click(function(){
$('#anh1').hide();
$('#mainpage').show();
});
$('#showimg2').click(function(){
$('#anh2').hide();
$('#mainpage').show();
});
$('#showimg3').click(function(){
$('#anh3').hide();
$('#mainpage').show();
});
$('#showimg4').click(function(){
$('#anh4').hide();
$('#mainpage').show();
});
});
</script>
<div data-role="page" id="mainpage">
<div data-role="header">
<h1>Ghep Tranh Tu</h1>
</div>
<div data-role="content" id="mycanvas" style="border:1px solid #d3d3d3;">
<canvas id="canvas1" style="border:1px solid #d3d3d3;margin:0;"></canvas>
<canvas id="canvas2" style="border:1px solid #d3d3d3;margin:0;"></canvas>
<canvas id="canvas3" style="border:1px solid #d3d3d3;margin:0;"></canvas>
<canvas id="canvas4" style="border:1px solid #d3d3d3;margin:0;"></canvas>
</div>
<ul id="wordstore" style="text-align:center;border:1px solid #d3d3d3;">
<ul style="text-align:center;border:1px solid #d3d3d3;">
<li style="display:inline;border:1px solid #d3d3d3;"><canvas id="canvas5"></canvas></li>
<li style="display:inline;border:1px solid #d3d3d3;"><canvas id="canvas6"></canvas></li>
<li style="display:inline;border:1px solid #d3d3d3;"><canvas id="canvas7"></canvas></li>
<li style="display:inline;border:1px solid #d3d3d3;"><canvas id="canvas8"></canvas></li>
</ul>
<ul style="text-align:right;border:1px solid #d3d3d3;">
<li style="display:inline;border:1px solid #d3d3d3;"><input id="canvasDraw" type="button" value="New Game"/></li>
</ul>
</ul>
</div>
<div data-role="page" id="anh1">
<header data-role="header">
<a id="showimg1" href="#" data-icon="grid" data-iconpos="notext">Photos</a>
</header>
<img id="img1" src="img/a14.jpg" style="width:100%;height:100%;"/>
</div><!-- Page Dog -->
<div data-role="page" id="anh2">
<header data-role="header">
<a id="showimg2" href="#" data-icon="grid" data-iconpos="notext">Photos</a>
</header>
<img id="img2" src="img/a14.jpg" style="width:100%;height:100%;"/>
</div><!-- Page Gummy Bears -->
<div data-role="page" id="anh3">
<header data-role="header">
<a id="showimg3" href="#" data-icon="grid" data-iconpos="notext">Photos</a>
</header>
<img id="img3" src="img/a14.jpg" style="width:100%;height:100%;"/>
</div><!-- Page Gummy Bears -->
<div data-role="page" id="anh4">
<header data-role="header">
<a id="showimg4" href="#" data-icon="grid" data-iconpos="notext">Photos</a>
</header>
<img id="img4" src="img/a14.jpg" style="width:100%;height:100%;"/>
</div><!-- Page Gummy Bears -->
</body>
</html>
i fixed it! :D my fail at " y<190 && y>265"
Thanks for reading.
Does somebody know how to hide URL on Android (like full screen) using HTML/javascript?
On iPad (Safari) this is simple and can be done using only a few meta tags.
I have tried something like that:
$(document).ready(function () {
scrollTo(0, 1);
});
But, on Motorola T1, the URL bar is still displayed :(
None of any solution above worked for me on Samsung S3 mini phone with Android 4.1.1
But I have followed the mentioned url and there was the absolutely right solution.
Thanks for it.
https://gist.github.com/1183357
See Fresheyeball's implementation. That works perfectly in portrait and landscape mode as well.
I just copy here my full example:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function() {
hideAddressBar();
});
function hideAddressBar() {
if (navigator.userAgent.match(/Android/i)) {
window.scrollTo(0, 0); // reset in case prev not scrolled
var nPageH = $(document).height();
var nViewH = window.outerHeight;
if (nViewH > nPageH) {
nViewH = nViewH / window.devicePixelRatio;
$('BODY').css('height', nViewH + 'px');
}
window.scrollTo(0, 1);
} else {
addEventListener("load", function() {
setTimeout(hideURLbar, 0);
setTimeout(hideURLbar, 500);
}, false);
}
function hideURLbar() {
if (!pageYOffset) {
window.scrollTo(0, 1);
}
}
return this;
}
</script>
</head>
<body>
<section>
<div>
<h1>First title</h1>
<p>Just some content</p>
</div>
</section>
<section>
<div>Any text</div>
</section>
</body>
</html>
Of course you need to put the jQuery main js file as well in order this example work properly. You can download from here http://jquery.com/download/
try this
$(document).ready(function() {
if (navigator.userAgent.match(/Android/i)) {
window.scrollTo(0,0); // reset in case prev not scrolled
var nPageH = $(document).height();
var nViewH = window.outerHeight;
if (nViewH > nPageH) {
nViewH -= 250;
$('BODY').css('height',nViewH + 'px');
}
window.scrollTo(0,1);
}
});
it works even if your page is not long enough
Try this one. I've used it and it seems to work perfectly on Android. It's from here:
https://gist.github.com/1183357
/*
* Normalized hide address bar for iOS & Android
* (c) Scott Jehl, scottjehl.com
* MIT License
*/
(function( win ){
var doc = win.document;
// If there's a hash, or addEventListener is undefined, stop here
if( !location.hash && win.addEventListener ){
//scroll to 1
window.scrollTo( 0, 1 );
var scrollTop = 1,
getScrollTop = function(){
return win.pageYOffset || doc.compatMode === "CSS1Compat" && doc.documentElement.scrollTop || doc.body.scrollTop || 0;
},
//reset to 0 on bodyready, if needed
bodycheck = setInterval(function(){
if( doc.body ){
clearInterval( bodycheck );
scrollTop = getScrollTop();
win.scrollTo( 0, scrollTop === 1 ? 0 : 1 );
}
}, 15 );
win.addEventListener( "load", function(){
setTimeout(function(){
//at load, if user hasn't scrolled more than 20 or so...
if( getScrollTop() < 20 ){
//reset to hide addr bar at onload
win.scrollTo( 0, scrollTop === 1 ? 0 : 1 );
}
}, 0);
} );
}
})( this );
I want to display a MapView that may be used to select a point to be displayed by StreetView in a separate area. I know that the API disallows multiple MapViews in a single process.
How can I cause StreetView to display in a different area than that which displays MapView?
I have been able to grab a static streetview without any problems, but I want to have dynamic StreetView and MapView.
aTdHvAaNnKcSe (THANKS in ADVANCE)
You can load 360 degree panoramic Google street-view in your WebView.
Try following activity in which both google-street-view and google-map can be navigated simultaneously in single Activity :
public class StreetViewActivity extends Activity {
private WebView webView;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mappingWidgets();
}
private void mappingWidgets() {
webView = (WebView) findViewById(R.id.webView);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
webView.getSettings().setSupportZoom(false);
// If you want to load it from assets (you can customize it if you want)
//Uri uri = Uri.parse("file:///android_asset/streetviewscript.html");
// If you want to load it directly
Uri uri = Uri.parse("https://google-developers.appspot.com/maps/documentation/javascript/examples/full/streetview-simple");
webView.loadUrl(uri.toString());
}
}
You can place this as static HTML page in assets folder of your application and then you can modify it's java-script according to your needs using Google street-view API.
Here I am posting sample streetviewscript.html that you can put in assets folder of your application and customize it according to your needs :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Street View Layer</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
<script>
function initialize() {
var fenway = new google.maps.LatLng(42.345573,-71.098326);
var mapOptions = {
center: fenway,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById('map_canvas'), mapOptions);
var panoramaOptions = {
position: fenway,
pov: {
heading: 34,
pitch: 10,
zoom: 1
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);
map.setStreetView(panorama);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 800px; height: 800px"></div>
<div id="pano" style="position:absolute; left:810px; top: 8px; width: 800px; height: 800px;"></div>
</body>
</html>
Edit : For simultaneously navigating two street views, load following HTML from assets :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Street View Events</title>
<STYLE type="text/css">
body, html { height:100%; padding:0; margin:0;}
#pano { float:left }
#pano1 { float:right }
</STYLE>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var cafe = new google.maps.LatLng(37.869085,-122.254775);
var heading_value = 270;
var pitch_value = 0;
var zoom_value = 1;
function initialize() {
var panoramaOptions = {
position: cafe,
pov: {
heading: heading_value,
pitch: pitch_value,
zoom: zoom_value
},
visible: true
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
var panorama2 = new google.maps.StreetViewPanorama(document.getElementById('pano1'), panoramaOptions);
google.maps.event.addListener(panorama, 'pano_changed', function() {
var panoCell = document.getElementById('pano_cell');
panoCell.innerHTML = panorama.getPano();
panorama2.setPano(panorama.getPano());
});
google.maps.event.addListener(panorama, 'links_changed', function() {
var linksTable = document.getElementById('links_table');
while(linksTable.hasChildNodes()) {
linksTable.removeChild(linksTable.lastChild);
};
var links = panorama.getLinks();
panorama2.setLinks(panorama.getLinks());
for (var i in links) {
var row = document.createElement('tr');
linksTable.appendChild(row);
var labelCell = document.createElement('td');
labelCell.innerHTML = '<b>Link: ' + i + '</b>';
var valueCell = document.createElement('td');
valueCell.innerHTML = links[i].description;
linksTable.appendChild(labelCell);
linksTable.appendChild(valueCell);
}
});
google.maps.event.addListener(panorama, 'position_changed', function() {
var positionCell = document.getElementById('position_cell');
positionCell.firstChild.nodeValue = panorama.getPosition();
panorama2.setPosition(panorama.getPosition());
});
google.maps.event.addListener(panorama, 'pov_changed', function() {
var headingCell = document.getElementById('heading_cell');
var pitchCell = document.getElementById('pitch_cell');
headingCell.firstChild.nodeValue = panorama.getPov().heading;
panorama2.setPov(panorama.getPov());
pitchCell.firstChild.nodeValue = panorama.getPov().pitch;
});
}
</script>
</head>
<body onload="initialize()">
<div style="width:100%; height :100%; background-color:Lime;">
<div id="pano" style="width:50%; height:100%; background-color:Blue;">
</div>
<div id="pano1" style="width:50%; height:100%; background-color:Gray;">
</div>
</div>
<div id="panoInfo" style="width: 425px; height: 240 px;float:left; display: none;">
<table>
<tr>
<td><b>Position</b></td><td id="position_cell"> </td>
</tr>
<tr>
<td><b>POV Heading</b></td><td id="heading_cell">270</td>
</tr>
<tr>
<td><b>POV Pitch</b></td><td id="pitch_cell">0.0</td>
</tr>
<tr>
<td><b>Pano ID</b></td><td id="pano_cell"> </td>
</tr>
<table id="links_table"></table>
</table>
</div>
</body>
</html>
How can I cause StreetView to display in a different area than that which displays MapView?
Street View is only available on the device as its own activity (from its own application) and therefore cannot be displayed alongside any of your own widgets.
On Android have a look at the sample Street View Panorama and Map available at https://developers.google.com/maps/documentation/android/code-samples. But i am not sure if it will also do for custom street views.