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 | 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 | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

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

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

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

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


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

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

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

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

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

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

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり