SQLの窓

2016年01月02日


Google MAP API が 1日に 25,000 ビューを超えると表示される画面



この表示は、某100均 の店舗検索画面です。この画面は、一瞬地図が表示された後この表示に変わりました。ただ、このページは検索結果のページで、元のページでも地図が表示されるのですが、そこは表示されていました。

そこでソースを見てみると、元のページでは apiキーが設定されていたので、正しく課金されているのだと思います。しかし、検索結果では apiキーが無いのでこのような表示になっているものと思われます。

つまり、一般的なページではこのような表示になり、表示を継続したければ apiコンソールで課金処理をする事によって復帰するのでしょう。


このサイトは地図の一日の使用量を声ました。このサイトの作成者である場合は、詳細についてこちらの生地をごらん下さい
この文章のリンク先は、こちら(英文)です。 25000ビューを超えると、1000ビュー毎に50セント( 0.5ドル )とあります。
タグ:Google Map google
posted by lightbox at 2016-01-02 00:09 | Comment(0) | Google MAP API V3 | このブログの読者になる | 更新情報をチェックする

2014年08月07日


Google MAP API V3(マップとストリートビュー) を使う為に最初に必要な MapOptions ( PanoramaOption ) オブジェクトの作成方法

iPhone と Android で、処理を変えているのは、Seesaa のスマホページで マップとストリートビューが表示されないからです。これは、デバイスの問題では無く、ソフトウェア的な事が理由らしく、Google Chrome のエミューレートでも表示されません。

スマホでも正しく表示する為に、スマホの場合のみ IFRAME を作成してその中にコンテンツを構築しています。
必ずしも onload でなくても動作します

Google のサンプルでは onload イベントが使用されていますが(日本語以外のチュートリアルだと、google.maps.event.addDomListener)、先に表示すべき DIV を定義してその後にスクリプトを書けば動作します。もちろんonload イベントを使ったほうが都合のいい場合もありますが、設置が面倒になる事が多いので、まずこの方法を試すといいと思います

また、チュートリアルでは DIV が 100% 設定されている為に、BODY の大きさをCSS で定義しておかないと表示されないというトラップがあるので注意して下さい。DIV の大きさを固定サイズにすると表示されます。

※ 英文のチュートリアルには以下の記述があります
<style type="text/css">
   html { height: 100% }
   body { height: 100%; margin: 0; padding: 0 }
   #map_canvas { height: 100% } 
</style> 

「オブジェクト」と言えば JSON の事です

つまり、{ プロパティ名 : 値 } で表現される内容で、クラスと呼ばれている場合は、google.maps.クラス名.オプション という記述でオブジェクトに設定します

無名ファンクション

(function () { 処理 })() として、実行しているのは、var で定義される変数をグローバルスコープに作らない為です。別に支障なければ「処理部分」を直接実行しても構いません。逆に map オブジェクトを後から使いたい場合は、グローバルスコープで定義する必要があります


以下のサンプルは、オプションの仕様の元に通常使いそうなものを設定してあります
<script	type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
// *****************************************
// Google マップ用
// *****************************************
function loadMap(doc,obj_str,a,b,c) {
	var latlng = new google.maps.LatLng(a,b);  
	var myOptions = {
		zoom: c,
		center: latlng,
		mapTypeControlOptions: {
			mapTypeIds: [
				google.maps.MapTypeId.HYBRID,
				google.maps.MapTypeId.ROADMAP,
				google.maps.MapTypeId.SATELLITE
			],
			style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
		},
		mapTypeId: google.maps.MapTypeId.HYBRID,
		scaleControl: true,
		navigationControlOptions : {
			style: google.maps.NavigationControlStyle.ZOOM_PAN
		}
	};
  
	var map = new google.maps.Map(
		doc.getElementById(obj_str),
		myOptions
	);
}

// *****************************************
// Google ストリートビュー用
// *****************************************
function loadStreetView(doc,obj_str,a,b,c,d) {
	var bryantPark = new google.maps.LatLng(a,b);  
	var panoramaOptions = {  
		position:bryantPark,  
		addressControl: true,  
		addressControlOptions: {  
			position: google.maps.ControlPosition.RIGHT_BOTTOM  
		},  
		pov: {  
			heading: c,  
			pitch: d,  
			zoom:1  
		},  
		visible: true  
	};  
  
	var targetDiv = doc.getElementById(obj_str);  
	var myPano = new google.maps.StreetViewPanorama(targetDiv, panoramaOptions); 
}

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

// *****************************************
// Google マップ
// *****************************************
if (userAgent.indexOf("iphone") > -1 || userAgent.indexOf("android") > -1 ) {
	(function() {
		var str="";
		str+="<iframe";
		str+="	id='frame_area2'";
		str+="	frameborder='0'";
		str+="	scrolling='no'";
		str+="	width='600'";
		str+="	height='480'";
		str+="	marginwidth='0'";
		str+="	marginheight='0'";
		str+="></iframe> \n";
		str+=" ";
		document.write(str);

		str="";
		str+="<div id='target_area' style='width: 100%; height: 100%'></div> \n";
		document.getElementById("frame_area2").contentWindow.document.write(str);
		document.getElementById("frame_area2").contentWindow.document.close();

		var doc = document.getElementById("frame_area2").contentWindow.document;
		loadMap(doc,"target_area",34.702777,135.495071,15);

	})();
}
else {
	(function() {
		str="";
		str+="<div id='target_area2' style='width: 600px; height: 480px'></div>";
		document.write(str);
		loadMap(document,"target_area2",34.702777,135.495071,15);
	})(); 
}

// *****************************************
// Google ストリートビュー
// *****************************************
if (userAgent.indexOf("iphone") > -1 || userAgent.indexOf("android") > -1 ) {
	(function() {
		var str="";
		str+="<iframe";
		str+="	id='frame_area'";
		str+="	frameborder='0'";
		str+="	scrolling='no'";
		str+="	width='600'";
		str+="	height='480'";
		str+="	marginwidth='0'";
		str+="	marginheight='0'";
		str+="></iframe> \n";
		str+=" ";
		document.write(str);

		str="";
		str+="<div id='target_area' style='width: 100%; height: 100%'></div> \n";
		document.getElementById("frame_area").contentWindow.document.write(str);
		document.getElementById("frame_area").contentWindow.document.close();

		var doc = document.getElementById("frame_area").contentWindow.document;
		loadStreetView(doc,"target_area",34.702777,135.495071,-18.81,14.54);

	})();
}
else {
	(function() {
		str="";
		str+="<div id='target_area' style='width: 600px; height: 480px'></div>";
		document.write(str);
		loadStreetView(document,"target_area",34.702777,135.495071,-18.81,14.54);
	})(); 
}
</script>



MapOptions

プロパティ タイプ
backgroundColor string
center LatLng
disableDefaultUI boolean
disableDoubleClickZoom boolean
draggable boolean
draggableCursor string
draggingCursor string
keyboardShortcuts boolean
mapTypeControl boolean
mapTypeControlOptions 通常右上に表示されるのは表示オプションボタン
ですが、縦のドロップダウンに変更しています。
本来、TERRAIN いう地形オプションがあります
が、平地ではどうせ使用不能になるようなので
意図的に外しています。
mapTypeId 初期値を HYBRID にすると、航空写真の「ラベル」
チェックが ON になります
navigationControl boolean
navigationControlOptions コントロールをなじみのあるものに変更していま
す。デフォルトだと小さいコントロールなので、
地図が小さい時に使用します
noClear boolean
scaleControl 何故かデフォルトで表示されないので、true に
しています
scaleControlOptions ScaleControlOptions
scrollwheel boolean
streetView StreetViewPanorama
streetViewControl boolean
zoom これは必須です
API の SCRIPT 要素は複数回ロードされても正しく動く事を確認しているので、ブログの記事毎に、Google MAP API V3 を貼り付けても問題無いと思います。

あと、API の V2 は廃止されるので移行する必要があります。
Google Maps JavaScript API バージョン 3 は、正式な JavaScript APIとなりました。JavaScript API バージョン 2 は、Google の廃止ポリシーにより正式に廃止されました。アップデート、拡張された新しいバージョンに、コードを移行することをおすすめします
Google Maps Javascript API V3 Reference
タグ:Google Map
posted by lightbox at 2014-08-07 11:26 | Google MAP API V3 | このブログの読者になる | 更新情報をチェックする

2013年03月12日


ブログ等に貼りつける為のストリートビューコードの取得ツール


http://toolbox.winofsql.jp/streetview.php

Google MAP API V3 の ストリートビューのイベント処理 で使ったイベント処理で、ブログ等に貼りつける為のストリートビューコードを表示する為の汎用コードを取得します。

デフォルトで表示しているのは、『ブルックリン美術館』ですが、違った場所は以下のようにして取得します

❶ 緯度・経度に Google ストリートビューのリンクの中の cbll の値をセット
( リンク取得から取り出した中から取出します )


❷ 必要ならば位置を移動します
❸ ドラッグで視点を変更します

最終的に設定変更ボタンで決定して、画面下のテキストエリアのコードを使用します。

iPhone と Android の特別な処理

環境によって、通常コードでは表示しないので確実に表示する為に IFRAME を作成してその中に表示しています。所有している iPhone で、Seesaa の スマホ専用ページを表示すると、IFRAME でしか表示されませんでした。

ブログを想定したコード

Google の API の読み込みが一度で済むようなコードを先頭に書いているので、ブログの複数記事が表示されるページでも問題無く表示可能です。


posted by lightbox at 2013-03-12 00:42 | Google MAP API V3 | このブログの読者になる | 更新情報をチェックする

2013年03月11日


Google MAP API V3 の ストリートビューのイベント処理

位置移動や視点移動した場合のパラメータの取得方法です。V2 の時と比べて、どのくらい変わってるか見に行ったら、全く違ってました。V2 やった経験があるのですぐ解りましたが、V3 用の該当するサンプルコードは見つけられませんでした。しかし、ストリートビューの重要なイベントはこの二つですし、他のイベントもこのコードで同様に対応できると思います。

<script type="text/javascript">
// 同一ページで複数実行しても最初のみ処理される
if ( window['loadGmap_v3'] !== true ) {
	window['loadGmap_v3'] = true;
	document.write("<"+"script type=\"text/javascript\" src=\"http://maps.googleapis.com/maps/api/js?sensor=false\"></"+"script>");
}
</script>
<input type="text" id="heading" />
<input type="text" id="pitch" />
<input type="text" id="latlng" />
<div id="check_param" style="width: 600px; height: 480px"></div>

<script type="text/javascript">
// 無名関数内で定義しているのは、グローバル変数を使わない為
(function() {
	// ページロード時の実行
	google.maps.event.addDomListener(window, 'load', function () {
		// 緯度・経度 
		var latlng = new google.maps.LatLng(40.671559,-73.962557);  
		var panoramaOptions = {  
			position:latlng, 
			// 住所表示する 
			addressControl: true, 
			// 住所表示の位置 
			addressControlOptions: {  
				position: google.maps.ControlPosition.RIGHT_BOTTOM  
			},  
			pov: {  
				// 向き
				heading: -128,  
				// 上下
				pitch: 10,  
				zoom:1  
			},  
			visible: true  
		};  

		// ストリートビューを表示する DIV	  
		var targetDiv = document.getElementById("check_param");  
		// ストリートビューオブジェクト
		var myPano = new google.maps.StreetViewPanorama(targetDiv, panoramaOptions); 

		// ストリートビューオブジェクトに対して、視点を変更した時にそのパラメータを表示
		google.maps.event.addListener( myPano, 'pov_changed', function() {
			document.getElementById("heading").value = Math.floor(myPano.getPov().heading * 100)/100;  
			document.getElementById("pitch").value = Math.floor(myPano.getPov().pitch * 100)/100;  

		});
		// ストリートビューオブジェクトに対して、移動した時にその位置を表示
		google.maps.event.addListener( myPano, 'position_changed', function() {
			document.getElementById("latlng").value = myPano.getPosition().toUrlValue(); 

		});

	});
})(); 

</script>



posted by lightbox at 2013-03-11 04:27 | Google MAP API V3 | このブログの読者になる | 更新情報をチェックする

2012年08月26日


Google MAP API V3 でのストリートビューで、「ビーナスの誕生」を表示


カメラの事は詳しく無いですが、魚眼レンズ(?) のように本来フラットな壁が曲がって見えているので、引いて見るとより多くの情報が表示できるようになっていました。書き方は特に前と変わっておらず、とにかく API キーが無くていいので助かります。

いろいろ変遷あるみたいです。記録の為に前の文章を残しておきます。魚眼レンズのようになるのは、User agent がスマホの時と、Firefoxの時だけです(Google Chrome でも User agent を上書きするとそうなります)。コードは今時の為に『スマホ対応』をする事が必要かもしれません。

panoramaOptions で、ロード時に「表示状態」にしているので、Google のサンプルにあるように setVisible というメソッドを使っていません。ですから、myPano の変数定義も本当は必要ありません。

このオプションは、日本語ドキュメントには書かれていません。Google の リファレンスって昔からこうなので、必ず英語版を確認する必要があります。
( これも記録です。現状では日本語化されていません )

※ onload のイベント登録は、API V3 の中にあるものです(google.maps.MapsEventListener object)。

以下はスマホ対応として、document.write を使って、IFRAME 内に書き込んでいます。
<script type="text/javascript">
(function() {
	var str="";
	str+="<iframe \n";
	str+="	id=\"frame220485139\" \n";
	str+="	class=\"gmap\" \n";
	str+="	frameborder=\"0\" \n";
	str+="	scrolling=\"no\" \n";
	str+="	width=\"600\" \n";
	str+="	height=\"450\" \n";
	str+="	marginwidth=\"0\" \n";
	str+="	marginheight=\"0\" \n";
	str+="></iframe> \n";
	str+=" ";
	document.write(str);

	str="";
	str+="<div id=\"frame_div\" style=\"width: 100%; height: 100%\"></div> \n";
	str+="<"+"script type=\"text/javascript\">  \n";
	str+="	document.write(\"<\"+\"script type=\\\"text/javascript\\\" src=\\\"http://maps.googleapis.com/maps/api/js?sensor=false\\\"></\"+\"script>\"); \n";
	str+="</"+"script>   \n";
	str+="<"+"script type=\"text/javascript\">  \n";
	str+="(function() { \n";
	str+="google.maps.event.addDomListener(window, 'load', function () { \n";
	str+="	var bryantPark = new google.maps.LatLng(43.768333,11.255963); \n";
	str+="	var panoramaOptions = { \n";
	str+="		position:bryantPark, \n";
	str+="		addressControl: true, \n";
	str+="		addressControlOptions: { \n";
	str+="			position: google.maps.ControlPosition.RIGHT_BOTTOM \n";
	str+="		}, \n";
	str+="		pov: { \n";
	str+="			heading: 101.62, \n";
	str+="			pitch: -0.75, \n";
	str+="			zoom:1 \n";
	str+="		}, \n";
	str+="		visible: true \n";
	str+="	}; \n";
	str+=" \n";
	str+="	var targetDiv = document.getElementById(\"frame_div\"); \n";
	str+="	var myPano = new google.maps.StreetViewPanorama(targetDiv, panoramaOptions); \n";
	str+="}); \n";
	str+="})(); \n";
	str+="</"+"script> \n";
	document.getElementById("frame220485139").contentWindow.document.write(str);
	document.getElementById("frame220485139").contentWindow.document.close();

})();
</script>

▼ iPhone での表示


▼ Android での表示


必ず必要なのでは無く、少なくともこの Seesaa で表示されないので IFRAME を使用しています。Google Chrome の User agent 変更オプションでも表示されないので、複雑な環境では起こる可能性が高いと考えます。但し、今後はどうなるか解らないですし、iPad だとふつうに表示するようです。(IFRAME + document.write で処理すると、IE では表示されません)


posted by lightbox at 2012-08-26 20:48 | Google MAP API V3 | このブログの読者になる | 更新情報をチェックする

2011年08月13日


Panoramio Widget API を Google MAP API V3 でレイヤーとして呼べるようになっていますが、いろいろ裏側は面倒だらけでした

そもそも Google MAP API V2 では、ストリートビューのオブジェクトを使って単体で Panoramio の画像を表示するメソッドがあったのですが、V3 ではありません。

そのかわりに、MAP の上にレイヤーとして乗っける事のできるライブラリが付加されているのですが、単体は Panoramio Widget API を使えという事になっていて、( 中で Panoramio Widget の DIV 作って重ねてるだけ )仕方無いので Panoramioの API を使ってみると、問題だらけ。

1) IE8( おそらくそれより前も ) では、リロードすると表示されない
2) 変数の扱いに問題があるらしく、js を最初にロードしないと環境によってエラー
( Seesaa でアウト )
3) IFRAME のほうは、画像の ID を指定できない
4) IFRAME の中を見ると、Google MAP API V2 が読み込まれている( 消し忘れ? )

というような理由で、一筋縄ではいかないので使わないほうがいいと言う結論に近いものです。知識のある人が使うのであればいいですが、普通では問題が出ても対処しようがありません。

1) の問題は対症療法でなんとか表示可能になりましたが、IE9 はまだどうなるか確認できていません。IE8 では、最後の表示メソッドを二回実行しています
<script type="text/javascript" src="http://www.panoramio.com/wapi/wapi.js?v=1&hl=ja_JP.utf8"></script> 
<div id="wapiblock"></div> 
 
<script type="text/javascript"> 
var wapiblock = document.getElementById('wapiblock'); 
var myOptions = { 
  'width': 600, 
  'height': 400 
}; 
var photoRequestOptions = { 
	ids: [{ 
		'photoId': 51485759, 
		'userId': 1839322 
	}] 
}; 
var widget = new panoramio.PhotoWidget(wapiblock, photoRequestOptions, myOptions); 
widget.setPosition(0); 
</script> 
<!--[if lte IE 8]> 
<script type="text/javascript">  
widget.setPosition(0);  
</script>  
<![endif]--> 

IE8 までは、レンダリングが遅いので、何かが間に合って無いのだと推測
されますが、しょせん「対症療法」です。

編集しながらの実行

Panoramio API Widget



posted by lightbox at 2011-08-13 21:36 | Google MAP API V3 | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します


Windows
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり