ソース掲示板




すべてから検索

キーワード   条件 表示 現行ログ 過去ログ トピックス 名前 本文
Google MAP ストリートビュー埋め込みサンプル
日時: 2009/12/13 00:49
名前: lightbox



   ggmap_apikey は、貼り付けるサイトの API キーです
拡張子:
<script type="text/javascript">
ggmap_apikey = "ABQIAAAADuryzsZi1CenwhafsPEvzBTlxX6exlqfox7R3DL2rE86SPuTyhTaQ7BUC2tKBidUAEn1fGLxVVQR1A";
</script>
<script type="text/javascript" src="http://winofsql.jp/createPano.js"></script>

<script type="text/javascript">
createPanoArea(600,400,45.462145,9.191231,80.38,-19.2);
</script>
拡張子:
createPanoArea は、いくつでも指定できますが、 API キーと createPano.js は、先頭に一度だけです
▼ 詳細はこちら
Google ストリートビューをAPI キーと 3行のJavaScript だけで埋め込む為のセット
拡張子:
カーソルを上に持って行くと、「ユーザの写真」を(クリックして)見る事ができます
メンテナンス

createPano.js : ソースコード ( No.1 )
日時: 2009/12/13 01:29
名前: lightbox


日時: 2009/12/13 01:29
名前: lightbox
拡張子:
// Google MAP API : パノラマセッティング
// 
// ※ changePano(obj,no) は現在使用していません
// ※ createPanoArea を使用して単独のストリートビューを作成します
// ※ 現在、複数のストリービューは別の方法で実装しています
var src_user = "http://maps.google.com/maps?file=api&v=2&sensor=false&key="+ggmap_apikey;
document.write(
	'<' +
	'script charset="utf-8" src="' + 
	src_user + 
	'"' + 
	' type="text/javascript"><' + 
	'/script>'
);

function changePano(obj,no) {
	var wPov = myPano[no].getPOV();
	wPov.zoom = 0;
	if (window.navigator.userAgent.toLowerCase().indexOf("opera") > -1) {
		myPano[no].panTo(wPov);
	}
	else {
		myPano[no].setPOV(wPov);
	}

	var newPlace =
		new GLatLng(
			panoList[obj.value][0],
			panoList[obj.value][1]
		);
	myPOV[no].yaw	= panoList[obj.value][2];
	myPOV[no].pitch	= panoList[obj.value][3];
	myPOV[no].zoom	= 0;
	myPano[no].setLocationAndPOV(newPlace, myPOV[no]);
}

function handleNoFlash(errorCode) {
	if (errorCode == 603) {
		alert("Error: Flash doesn't appear to be supported by your browser");
		return;
	}
}

function handleUnload_createPano() {

	GUnload();
	if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) {
		try {
			CollectGarbage();
		}
		catch(e) {
		}
	}
}

if (window.attachEvent){
	window.attachEvent('onunload', handleUnload_createPano);
}
else {
	window.addEventListener('unload', handleUnload_createPano, false);
}

function createPano(w,h,s) {

	var key;
	var save="";
	unit_no++;

str="";
str+="<div name=\"pano"+unit_no+"\" id=\"pano"+unit_no+"\"";
str+=" style=\"width: "+w+"px; height: "+h+"px\"></div> \n";
str+="<select id=\"combo"+unit_no+"\" onChange='changePano(this,"+(unit_no-1)+")'> \n";

	loop_flg = false;
	for (key in panoList)   {
		if ( s == key ) {
			loop_flg = true;
		}
		if ( loop_flg ) { 
			if ( save == '' ) {
				save = key;
			}
			str+="<option value=\""+key+"\">"+panoList[key][4]+"</option> \n";
		}
	}

str+="</select> \n";
str+=" ";

	document.write(str);

	myPano[(unit_no-1)] = new GStreetviewPanorama(document.getElementById("pano"+unit_no));
	var fenwayPark = new GLatLng(panoList[save][0],panoList[save][1]);
	myPOV[(unit_no-1)] = {yaw:panoList[save][2],pitch:panoList[save][3],zoom:0};
	myPano[(unit_no-1)].setLocationAndPOV(fenwayPark, myPOV[(unit_no-1)]);

	GEvent.addListener(myPano[(unit_no-1)], "error", handleNoFlash);

	document.getElementById("combo"+unit_no).selectedIndex = 0;
}

function createPanoArea(w,h,a,b,c,d) {

	unit_no++;

	var appVersion = window.navigator.appVersion.toLowerCase();

	if (appVersion.indexOf("msie 6.0") > -1) {

str="";
str+="<iframe \n";
str+="	id=\"pano"+unit_no+"\" \n";
str+="	frameborder=\"no\" \n";
str+="	scrolling=\"no\" \n";
str+="	width=\""+ (w+50) +"\" \n";
str+="	height=\""+ (h+50) +"\" \n";
str+="	src=\"http://winofsql.jp/ggv_pano_basic.php?w="+w+"&h="+h+"&a="+a+"&b="+b+"&c="+c+"&d="+d+"\" \n";
str+="></iframe> \n";
		document.write(str);

		document.write(
			'<' +
			'script ' + 
			' type="text/javascript">' + 
			'try {document.getElementById("'+'pano'+unit_no+'").contentWindow.location.reload();}catch(e){}' + 
			'<' + 
			'/script>'
		);

	}
	else {


str="";
str+="<div name=\"pano"+unit_no+"\" id=\"pano"+unit_no+"\"";
str+=" style=\"width: "+w+"px; height: "+h+"px\"></div> \n";

		document.write(str);

		var myView = new GStreetviewPanorama(document.getElementById("pano"+unit_no));
		var fenwayPark = new GLatLng(a,b);
		var myPanoView = {yaw:c,pitch:d,zoom:0};
		myView.setLocationAndPOV(fenwayPark, myPanoView);

		GEvent.addListener(myView, "error", handleNoFlash);

	}
}

var unit_no = 0;
var loop_flg;
var myPano = Array();
var myPOV = Array();
var panoList = new Object();
このアーティクルの参照用URLをクリップボードにコピー メンテナンス