Google Maps APIで地図の高さを100%にして、フルスクリーンにする方法
日本語サイトには、説明の良いサイトが無かったので、海外サイトを見ていたらありました。（感謝！）
地図左上に”Show Highlighted Code”があるのでクリック。HTM記述がハイライト表示でわかりやすく記述されています。
スポンサードリンク
Category Archives: Google
Google Maps APIの全画面表示スタイルシート フルスクリーン高さ100％の指定
Posted by 管理人 on 2010年7月18日
None comments | 4,964 views
Google Maps API ver3＆markerClustererの今後とスマートフォンへの適用
Posted by 管理人 on 2010年7月10日
None comments | 1,096 views
v3 markerClustererの海外記事
Google Maps API ver3に移行しようか悩んで、海外記事を読んでいたら、数千（1000～2000マーカ）をMarkerClustererで何とかしようと試みているコレポンがあった。
ちなみに2010年7月現在のコレポンだ。
Google Maps API ver3にすることにより、より軽快に大量のマーカーを表示できるかと思って期待しているのだが、まだまだ時間はかかりそうである。
やはり1000マーカーを越えてくると苦しい（表示が重くなるようだ）。Google chromeを使えばさくさくだが、一般的にはまだまだIE7が多いようです。
Google マップ ストリートビュー 記事中にJavascript＜script＞を記述する
Posted by 管理人 on 2010年7月2日
None comments | 303 views
Google マップ ストリートビューのScriptをWordpressの記事の中に記述したら動作しなかったです。困ってたら、Scriptファイルを外部に置けば良いとのアドバイスが・・・・。
しかし、それでも動かん。 scrで外部URLを指定してもだめ・・・・。
しかし、知ってる方がいらっしゃいました。divで囲うとのこと。感謝！！
<div><script type=”text/javascript” src=”/script/hoge.js”></script></div>
その結果、動作！ こんな感じ。 ↓
◆「Google マップ ストリートビュー + 地図」
ストリートビュー画面に合わせて、マップ上の青三角形が移動します。 オーバーレイ（青い道路）表示：
phpMyAdmin で MySQL のデータテーブルから指定選択した変数のマーカー（アイコン）だけを表示させる／PHP, MySQL & Google Maps
Posted by 管理人 on 2010年6月18日
2 comments | 2,304 views
MySQLのデータテーブルから全ての行を選択して表示させるためのｐｈｐファイルに記述する（全てのマーカー表示）、select文は、
次の通り（参考記事）
$query = “SELECT * FROM markers WHERE 1″;
今回は、特定のマーカーだけを、抽出選択して地図に表示させてみる。
bodyタグでのonloadイベント body onload=”onLoad()” を外部Scriptファイルに記述する方法
Posted by 管理人 on 2010年5月29日
None comments | 3,182 views
<body onload=”onLoad()”>等のイベントをwordpress（php）でGoogle Maps APIをやる場合にどうしたらいいかなと、v3をチラ見していたら、この方のv3の記述でふと・・・window.onload ・・・・ブラウザによっては問題があるようなこともどこかのサイトに書いてありましたがまあOKで。
Scriptファイル内にbodyタグのイベント記述する方法なのですが、次のようなもの。wordpressでは重宝。
◆サンプル
- bodyタグでイベント指定
<body onload=”load();” onunload=”GUnload();”><script type=”text/javascript”>// <![CDATA[function load() {if (GBrowserIsCompatible()) {var map100 = new GMap2(document.getElementById(“map”));map.setCenter(new GLatLng(35.71515, 139.39008), 17, G_SATELLITE_MAP);var marker = new GMarker(map100.getCenter());map.addOverlay(marker);}}// ]]></script>
矢印アイコン、アルファベットアイコン、（影付き）
Posted by 管理人 on 2010年5月26日
None comments | 11,465 views
Web（ウェブ）タブ検索ボックス／Google AJAX Search API サンプル
Posted by 管理人 on 2010年5月25日
None comments | 1,551 views
◆サンプル
Loading…
◆下記をコピー
<!– Google AJAX Search API キー –>
<script src=”http://www.google.com/uds/api?file=uds.js&v=1.0&key=あなたのGoogle AJAX Search APIキー” type=”text/javascript” charset=”utf-8″></script>
<!– 検索結果表示スタイルシート –>
表示を変えたければ、CSSをダウンロードして書き換え方。デフォルト幅は、.gsc-control { width: 300px;}
<link href=”http://www.google.com/uds/css/gsearch.css” rel=”stylesheet” type=”text/css” />
<!– HTML記述 –>
<div id=”search_control_tabbed”>Loading…</div>
<!– 検索結果タブ設定 –>
<script type=”text/javascript”>// <![CDATA[google.load(‘search’, ‘1.0’);function OnLoad() {// create a tabbed mode search controlvar tabbed = new google.search.SearchControl();tabbed.setResultSetSize(google.search.Search.LARGE_RESULTSET);tabbed.addSearcher(new google.search.ImageSearch());tabbed.addSearcher(new google.search.VideoSearch());tabbed.addSearcher(new google.search.WebSearch());tabbed.addSearcher(new google.search.BlogSearch());tabbed.addSearcher(new google.search.BookSearch());tabbed.addSearcher(new google.search.NewsSearch());// draw in tabbed layout modevar drawOptions = new google.search.DrawOptions(); drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED); tabbed.draw(document.getElementById(“search_control_tabbed”), drawOptions);tabbed.execute(“フェラーリ“); }google.setOnLoadCallback(OnLoad, true);// ]]></script>
地図内にマップをフルスクリーンで表示できるアイコンを設置する。
Posted by 管理人 on 2010年5月22日
None comments | 518 views
Phoogle ってなんだ？
Posted by 管理人 on 2010年5月22日
None comments | 126 views
「Phoogle Modified Class for Google Maps」という記事。
Examle3に、Clusterer2.jsを使って、2000マーカーを表示してるサンプルがありました。
しかし、PHOOGLEとは？
Phoogle – System 7 Designsという会社のものらしい。
スポンサードリンク
