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.
Related
I have built a Cordova Android app using jQuery Mobile and Google Maps V3.
The Map works fine for some time, but when I try to zoom or drag the map for 4-5 times the app freezes. It only works again if I clean my cache/RAM. I have used custom markers, and marker positions are from a SQLite database.
<div data-role="page" data-theme="f" id="Gomap" style="width:100%; height:100%;">
<div role="banner" class="ui-bar-a ui-header" data-role="header" data-position="fixed" data-tap-toggle="false">
<a data-theme="f" href="branch_locator.html" data-rel="back" class="ui-btn-left ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-up-a" data-icon="arrow-l">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">
Back
</span>
<span class="ui-icon ui-icon-arrow-l ui-icon-shadow">
</span>
</span>
</a>
<h1 aria-level="1" role="heading" tabindex="0" class="ui-title">
Google Map
</h1>
</div>
<div data-role="content" class="map" id="content">
<div id="map_canvas" style="height:100%;">
<div class="img-container"><img src="img/loading8.gif" /> </div>
</div>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="foot">
</div>
<!-- /footer -->
<script type="text/javascript" src="js/map.js"></script>
</div>
map.js
var latt1;
var longg1;
var latt2;
var longg2;
$("#Gomap").on("pageshow", function(e) {
var s = $(this).data("url");
var lat1Part = s.split("&")[0];
var long1Part = s.split("&")[1];
var lat2Part = s.split("&")[2];
var long2Part = s.split("&")[3];
latt1 = lat1Part.split("=")[1];
longg1 = long1Part.split("=")[1];
latt2 = lat2Part.split("=")[1];
longg2 = long2Part.split("=")[1];
loadScript();
});
function initialize() {
$('#map_canvas').empty();
var ur_pos = new google.maps.LatLng(latt1, longg1);
var br_pos = new google.maps.LatLng(latt2, longg2);
$('#map_canvas').gmap();
$('#map_canvas').gmap({
'center': ur_pos
});
$('#map_canvas').gmap({
'zoom': 6
});
$('#map_canvas').gmap('addMarker', {
'position': br_pos,
'bounds': true,
'icon':'img/logo.png',
'animation': google.maps.Animation.DROP
}).click(function() {
$('#map_canvas').gmap('openInfoWindow', {
'content': '<B>Some Text Here</B>'
}, this);
});
$('#map_canvas').gmap('addMarker', {
'position': ur_pos,
'bounds': true,
'animation': google.maps.Animation.DROP
}).click(function() {
$('#map_canvas').gmap('openInfoWindow', {
'content': '<B>Your Current Position</B>'
}, this);
});
$('#map_canvas').gmap('refresh');
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://maps.googleapis.com/maps/api/js?key=GMAP KEY HERE&sensor=false&' +
'callback=initialize';
document.body.appendChild(script);
}
<!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.
I have intent filter to intercept url's from Google maps.
My problem is: shortened link. If I don't know coordinates - links are useless. Unfortunately in Google maps for android links are shortened. In web user can choose type of Google maps link - short or not. In this case I have chance to use coordinates.
In short: If have link like this
http://maps.google.com/maps?q=45.089036,+-106.347656&num=1&t=h&vpsrc=0&ie=UTF8&z=4&iwloc=A
there is not problem to read coordinates. But if link is:
http://m.google.com/u/m/zIOcsV
ooops... Google have internal way to solve this link.
Does anybody found way to get coords from second link?
you can use this example of jquery mobile app using google maps geo coordinates:
jsfiddle-google-maps-geo-coordinates
or with custom images here: jsfiddle-google-map-with-images
the head is:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<!--link rel="stylesheet" href="/Content/jquery-mobile-responsive.css" /-->
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true&language=en"></script>
<script>
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
$(Start);
function Start() {
$("#google_map .ui-collapsible-heading").click(function () {
var locations = [
['<br/>Main Office', 31.590496, 34.561981, 4],
['Sensor 16<br/>User Name: 16_DE-1R', 31.590595, 34.562980, 5],
['Sensor 17<br/>User Name: 17_TEN-2MP', 31.590694, 34.563979, 3],
['Sensor 18<br/>User Name: 18_TEN-2MP', 31.590793, 34.564978, 2],
];
var map = new google.maps.Map(document.getElementById('googleMap'), {
zoom: 17,
center: new google.maps.LatLng(31.590892, 34.561977),
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][3], 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));
}
});
}
</script>
and body:
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="a">
<a data-icon="back" href="#" rel="external">Back</a>
<h1>Sensor</h1>
</div>
<div data-role="content">
<div class="content-primary">
<h2>Sensor: 16</h2>
<div data-role="collapsible-set">
<div id="google_map" data-role='collapsible' data-collapsed=true data-theme="b" data-content-theme="d">
<h1>Sensor Map</h1>
<div id="googleMap" style="width:100%; height:300px;"></div>
</div>
</div>
<ul data-role="listview" data-inset="true" data-theme="b">
<li data-role="list-divider"></li>
<li>Configure Comm</li>
<li>Measurements</li>
<li>Users</li>
</ul>
</div>
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
<h3>More Options</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Actions</li>
<li>Add User</li>
<li>Edit Sensor</li>
<li>Delete Sensor</li>
</ul>
</div>
</div>
</div>
<div data-role="footer" data-theme="a">
<h4>Mobile</h4>
</div>
I am trying to provide a mask to enable user to enter ssn in the format of 999-99-9999. I tried to use the masked input plugin from digital bush. This works fine on chrome and safari but doesn't work on android.
Problem: When entering the numbers, it is fine until 123- and when I enter the next 2 digits it reverses the sequence. for ex: if I enter 123-45 it displays as 123-54 and this issue continues for each separator. For ex: if I enter 123-45-6789, it displays as 123-56-8974
I tried to write my own code as below to handle the keypress and keyup and still get the same issue. Has any one had any success with masking input on android? What is the alternative?
Here is the complete html with local links to code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> test ground</title>
<!-- JQuery specific -->
<script type="text/javascript" src="libs/jQuery/jQuery.min.js" ></script>
<script type="text/javascript" src="libs/jQuery/mobile/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="libs/jQuery/mobile/jquery.mobile.min.css" />
<script src="javascript/jquery.maskedinput-1.3.js" type="text/javascript" charset="utf-8"></script>
<!-- Application specific -->
<script type="text/javascript">
$(document).bind('mobileinit',function(){
// $.mobile.page.prototype.options.addBackBtn = true;
// $.mobile.page.prototype.options.backBtnText = "Previous";
// $.mobile.page.prototype.options.backBtnTheme = "b";
});
$("[data-role='page']").live("pageshow", function(event) {
$("#primaryssn").mask("999-99-9999");
});
</script>
</head>
<body>
<!-- ################### PAGE: launchpage ################### -->
<div data-role="page" id="launchpage">
<div id="header" data-role="header" data-position="fixed" >
<div id="headerlogo" > </div>
<h1 class="appTitle" >My App</h1>
</div>
<div data-role="content" >
<div class="content-primary">
<p> Welcome to my app </p> <br/>
</div>
<!-- Primary SSN -->
<div data-role="none">
<label name="lblprimaryssn" for="primaryssn" > SSN</label>
<input type="text" name="primaryssn" id="primaryssn" value="" />
<span class="error" id="primaryssnerror"> Please enter your SSN as (999-99-9999) </span>
</div>
<br/>
</div><!-- /content -->
</div><!-- /launch page -->
</body>
</html>
Here is the code I used for masking input based on key stroke on keyup:
// _v is value passed in on keyup in this input field
// _d indicates if the key is a backspace to delete character
var setSSN = function (_v, _d){
var v = $.trim(_v);
if ( !_d ){
if ( v.length <= 3 ) {
var validformat1=/^\d{1,3}$/ ;
if ( validformat1.test(v)) {
if ( v.length == 3 ) v = v + '-';
return v;
}
}
else if ( v.length >3 && v.length <= 6) {
var validformat2=/^\d{3}\-\d{0,2}$/ ;
if ( validformat2.test(v)) {
if ( v.length == 6 ) v = v + '-';
return v;
}
}
else {
var validformat3=/^\d{3}\-\d{2}\-\d{0,4}$/ ;
if ( validformat3.test(v)) {
if ( v.length == 6 ) v = v + '-';
return v;
}
}
v = v.substring(0,v.length-1);
return v;
}
else {
if ( 3 == v.length || 6 == v.length ) {
v = v.substring(0,v.length-1);
}
}
return v;
}
If you just want to hide the characters as they type you could use
<input type="password">
This issue has been fixed in the masked input jquery plugin. Updating to the latest version should resolve this issue.
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.