SQLの窓

2016年06月11日

Google Maps API の ジオコーディング サービスで、住所から緯度・経度の取得

久しぶりに調べたら、インターネットでは古い V2 の情報ばかりだったので。

Google の 日本語ドキュメントページ(ジオコーディング サービス)

▲ のページにそのままのサンプルがあるので、以下のようなソースコードでテストしました

API の読み込みにAPIキーを省略しています
( API キーは自分専用のを取得して指定します )
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
var lat = 34.7013233;
var lng = 135.4966954;
var geocoder = new google.maps.Geocoder();
var map;

$(function(){
	$("#geo_action").on("click",function(){
		geocoder.geocode( {'address': $("#address").val()}, function(results, status) {
			if (status == google.maps.GeocoderStatus.OK) {
				map.setCenter(results[0].geometry.location);
				var marker = new google.maps.Marker({
					map: map,
					position: results[0].geometry.location
				});
				// lat と lng
				console.log(results[0].geometry.location.lat(),results[0].geometry.location.lng());
			}
			else {
				alert("Geocode が失敗しました : " + status);
			}
		});
	});
});

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
	};
	map = new google.maps.Map(doc.getElementById(obj_str),myOptions);
}
google.maps.event.addDomListener(window, 'load', function () {
	loadMap(document,"target_area",lat,lng,15);
}); 
</script>
住所 <input type="text" id="address" style='margin-bottom:10px;width:450px;'> <input type="button" id="geo_action" value="実行">
<div id='target_area' style='width: 600px; height: 480px'></div>
API キー無しでも動作しますが、console ではその旨のワーニングが出るので、将来的には動作しなくなる可能性はあります。
Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys
そもそも、Google の API は課金制で、相当数の利用があった場合は支払いの必要性が出て来る為、Google では API キーを元に連絡するというプロセスの為に API が必要です。 一般ユーザが使用する程度では、課金対象になる事はありませんが、認識は必要でしょう。
posted by at 2016-06-11 15:32 | Comment(0) | Google MAP | このブログの読者になる | 更新情報をチェックする

2014年07月29日

Google MAP で『サハラの目』



超巨大な目です。やはり 『Eye of the Sahara』とあります。

直径は約50kmに及び、宇宙空間からでないと、その全容は掴めないですが、隕石とは関係無いそうです。
( リシャット構造 )

さすがにストリートビューは無かったです。


posted by at 2014-07-29 16:16 | Comment(0) | Google MAP | このブログの読者になる | 更新情報をチェックする

2014年07月28日

Google MAP でナスカの地上絵のスパイダーとハチドリ



こんなのできるようになったんですね。

最初の倍率では良く解らないですが、+ で寄ると蜘蛛が見えます。

左下のアイコンで地図に変えると、Nazca Spider って書いてあります。

以下は、Hummingbird です



posted by at 2014-07-28 01:28 | Comment(0) | Google MAP | このブログの読者になる | 更新情報をチェックする

2014年07月23日

Google ストリートビューの緯度・経度を適当に変更して表示された場所がやたらと綺麗な街だった

なにかの海外テレビドラマか何かに出て来るような街です。異常に綺麗なんですが、Google MAP で同じ場所を見てみると、モントリオール(カナダ)の近くの高級住宅街のような感じでした。

ストリートビューコードの取得


posted by at 2014-07-23 17:17 | Comment(0) | Google MAP | このブログの読者になる | 更新情報をチェックする

2014年07月12日

今時の Google MAP からストリートビューを楽しむ方法

今となっては、昔のインターフェイスを確認できないんですが、少なくとも今は『人形アイコン』をクリックすると、ストリートビュー準備モードになって、水色の部分等をクリックするとそのままストリートビューに移行します。

▼ 移行中のアニメーションの一場面


▼ しかし、ここでドラッグなら何も起きず、好きな場所へ行ってクリックできます。


但し、ストリートビューから地図へ戻って来ると、ストリートビュー準備モードは解除されるので、もう一度人形アイコンをクリックする必要があります( でも、このほうが確かに使いやすいです )

以下は、ローマのコロッセオに行く手順です

▼ ローマで検索


▼ 2回クリックして少し拡大


▼ 人形アイコンをクリック


▼ 目的場所をクリック


▼ この場合は徒歩で撮られた写真が表示されます




posted by at 2014-07-12 14:29 | Comment(0) | Google MAP | このブログの読者になる | 更新情報をチェックする

2012年12月07日

Google MAP API V3 : 「ストリートビューのすすめ」のための汎用貼り付けコード

同じページに複数貼り付けても、問題の出無いように二回目以降はAPI のロードを行いません。何も考えずに、緯度と経度と表示位置を指定してしまえば OK です

ちなみに、Google は知らない間に Google カーを降りてどんどんいろんなところへ進出しています。ついこないだまでここは見れなかったはずなのですが。

グリプスホルム城
Google で表示してデータを取得
※ リンクを表示してクリップボードにコピーしてメモ帳に貼り付けます


反転部分が緯度と経度です。( heading と pitch は最後の cbp の部分 )


▼ スマホ対応のコードです( 参照 : スマホ対応の Google MAP API 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>
<script type="text/javascript">  
var userAgent = window.navigator.userAgent.toLowerCase();
if (userAgent.indexOf("iphone") > -1 || userAgent.indexOf("android") > -1 ) {
(function() {
	var str="";
	str+="<iframe \n";
	str+="	id=\"frame0001\" \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(59.256077,17.219078); \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: 113.74, \n";
	str+="			pitch: 19.48, \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("frame0001").contentWindow.document.write(str);
	document.getElementById("frame0001").contentWindow.document.close();

})();
}
else {
(function() {
	str="";
	str+="<div id=\"cbll59_256077_17_219078\" style=\"width: 600px; height: 480px\"></div> ";
	document.write(str);
	google.maps.event.addDomListener(window, 'load', function () { 
		var bryantPark = new google.maps.LatLng(59.256077,17.219078);  
		var panoramaOptions = {  
			position:bryantPark,  
			addressControl: true,  
			addressControlOptions: {  
				position: google.maps.ControlPosition.RIGHT_BOTTOM  
			},  
			pov: {  
				heading: 113.74,  
				pitch: 19.48,  
				zoom:1  
			},  
			visible: true  
		};  
	  
		var targetDiv = document.getElementById("cbll59_256077_17_219078");  
		var myPano = new google.maps.StreetViewPanorama(targetDiv, panoramaOptions); 
	}); 
})(); 
}
</script>  



コードを取得

ブログ等で使えるストリートビューコードを取得します


posted by at 2012-12-07 20:41 | Google MAP | このブログの読者になる | 更新情報をチェックする

2012年11月22日

Javascript:高機能なメディアライブラリ(Shadowbox.js)を使ってGoogleストリートビューを画面中央にポップアップさせる

※ Google API はまだ v2 を使っています

Shadowbox_sview

Shadowbox.js は、Lightbox よりさらにいろいろなメディアが利用できるライブラリですが、やはりそれなりに専門知識が必要になって来ますし、ブラウザが標準モードになる必要があるので、ブログによっては根本的に使え無い場合もあります。

▼ クリックすると shadowbox が起動します
エッフェル塔
風車

ggv_pano_basic.php と shadowbox を使ったリンクの作成
w=600&h=400 のようにしてストリートビュー側も大きさを変更をできますが( デフォルト600x400 )、サイズは shadowbox と一致させて下さい。
<script type="text/javascript" src="http://lightbox.on.coocan.jp/sbx33/loadShadowbox.js" charset="utf-8"></script>
<a rel="shadowbox[sview1];width=900;height=700" href="http://lightbox.on.coocan.jp/ggv_pano_basic.php?w=900&h=700&a=48.857288&b=2.294404&c=8.24369085737899&d=-40">エッフェル塔</a>

実際のテストは、こちらで出来ます


posted by at 2012-11-22 22:19 | Google MAP | このブログの読者になる | 更新情報をチェックする

2012年08月24日

iPhoneとAndroid でも正しくGoogle MAP(API V3) を表示させる為の汎用コード

いろいろな環境が絡み合っているブログの記事内で Google MAP(API V3)を表示しようとすると、何故か iPhone と Android で MAP が描画されないという現象が起こりました。これは、Google Chrome の agent の置き換えでも再現するので、根本的に Google 側での技術的な問題であると思われます。と言うのも、何故か iPad だと問題無く表示するからです。

これと似たような状況は数年前の IE でも起こった記憶がありますが、単純なページでチュートリアル通りに API を使えば確かに問題が出ないので、IFRAME を使って実装しています。

文字列内の frame0001 を記事毎に変更すれば、ブログで同一ページに複数の記事が表示されても、正しく処理が可能で、逆に iframe 内で全て完結するので、うまく動くのであればこのほうが安定した実装になると思います。
<script type="text/javascript">
(function() {
	var str="";
	str+="<iframe \n";
	str+="	id=\"frame0001\" \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+=" \n";
	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 latlng = new google.maps.LatLng(34.702777,135.495071);  \n";
	str+="		var myOptions = {  \n";
	str+="			zoom: 15,  \n";
	str+="			center: latlng,  \n";
	str+="			mapTypeControlOptions: {  \n";
	str+="				mapTypeIds: [  \n";
	str+="					google.maps.MapTypeId.HYBRID,  \n";
	str+="					google.maps.MapTypeId.ROADMAP,  \n";
	str+="					google.maps.MapTypeId.SATELLITE  \n";
	str+="				],  \n";
	str+="				style: google.maps.MapTypeControlStyle.DROPDOWN_MENU  \n";
	str+="			},  \n";
	str+="			mapTypeId: google.maps.MapTypeId.HYBRID,  \n";
	str+="			scaleControl: true,  \n";
	str+="			navigationControlOptions : {  \n";
	str+="				style: google.maps.NavigationControlStyle.ZOOM_PAN  \n";
	str+="			}  \n";
	str+="		};  \n";
	str+="		var map = new google.maps.Map(  \n";
	str+="			document.getElementById(\"frame_div\"),  \n";
	str+="			myOptions  \n";
	str+="		); \n";
	str+="	});  \n";
	str+="})();  \n";
	str+="</"+"script>  \n";
	str+=" ";
	document.getElementById("frame0001").contentWindow.document.write(str);
	document.getElementById("frame0001").contentWindow.document.close();

})();
</script>

このコードだと、Seesaa のスマホページでも正しく表示されますが、専用ページの横幅と縦幅を考慮しないと実用的には問題が残ってしまいます。まず、横幅に合わせて IFRAME の幅を変更してはみ出ないようにする必要がありますし、高さは縦スクロールが可能なように上下に余裕のあるサイズに変更する必要があります。

▼ Google Chrome の agent 置き換えでの表示結果

右端に少し余裕があると上下に余裕が無くてもスクロール可能
( 広告で余裕がなくなる場合がある )

▼ Seesaa でのスマホページでの実装例(コンテンツの『ブログ説明』の一番下に設置)
var userAgent = window.navigator.userAgent.toLowerCase();
if (userAgent.indexOf("iphone") > -1 || userAgent.indexOf("android") > -1 ) {
	str="";
	str+="<style type=\"text/css\"> \n";
	str+=" \n";
	str+=".iphone { \n";
	str+="	width:290px!important; \n";
	str+="} \n";
	str+=".text img { \n";
	str+="	width:290px!important; \n";
	str+="} \n";
	str+=".panoramio-wapi-tos img { \n";
	str+="	width:auto!important; \n";
	str+="} \n";
	str+=".text .gmap { \n";
	str+="	width:290px!important; \n";
	str+="	height:320px!important; \n";
	str+="} \n";
	str+=".text pre { \n";
	str+="	width:auto!important; \n";
	str+="} \n";
	str+=".text div { \n";
	str+="	width:auto!important; \n";
	str+="} \n";
	str+=" \n";
	str+="</style> ";
	document.write(str);
}



posted by at 2012-08-24 18:38 | Google MAP | このブログの読者になる | 更新情報をチェックする

久しぶりに Panoramio 画像の表示

Google 関連の API は時々テストしておかないとね。

コード作成
▲ ユーザID と 写真ID をセットして『変更ボタン』をクリックするだけです

JavaScript が読める方は、以下のテストボタンで実際にいろいろやってみて下さい。
posted by at 2012-08-24 02:48 | Google MAP | このブログの読者になる | 更新情報をチェックする

Google MAP API V3 汎用貼り付けコード

コードテストボタンを追加しました。
( コードを転送して、内容を変更しながらテストできます )

標準的なサテライトと地図とラベルの合成( ハイブリッド )の貼り付けです。今となっては、ただ地図を貼り付けても面白くもなんとも無いですが、API キーがいらなくなったので、誰でもすぐ使えるのは魅力ではあります

※ 完全にスマホ対応するにはこちらを参照して下さい
<div id="pa34_702777_135_495071" style="width: 600px; height: 450px"></div>
<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>  
<script type="text/javascript"> 
(function() {
	google.maps.event.addDomListener(window, 'load', function () { 
		var latlng = new google.maps.LatLng(34.702777,135.495071); 
		var myOptions = { 
			zoom: 15, 
			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( 
			document.getElementById("pa34_702777_135_495071"), 
			myOptions 
		);
	}); 
})(); 
</script> 


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

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

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

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

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


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

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

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

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

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


Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX