Google Maps APIで地図の高さを100%にして、フルスクリーンにする方法
日本語サイトには、説明の良いサイトが無かったので、海外サイトを見ていたらありました。(感謝!)
地図左上に”Show Highlighted Code”があるのでクリック。HTM記述がハイライト表示でわかりやすく記述されています。
スポンサードリンク
Google Maps API ver3に移行しようか悩んで、海外記事を読んでいたら、数千(1000~2000マーカ)をMarkerClustererで何とかしようと試みているコレポンがあった。
ちなみに2010年7月現在のコレポンだ。
Google Maps API ver3にすることにより、より軽快に大量のマーカーを表示できるかと思って期待しているのだが、まだまだ時間はかかりそうである。
やはり1000マーカーを越えてくると苦しい(表示が重くなるようだ)。Google chromeを使えばさくさくだが、一般的にはまだまだIE7が多いようです。
Google マップ ストリートビューのScriptをWordpressの記事の中に記述したら動作しなかったです。困ってたら、Scriptファイルを外部に置けば良いとのアドバイスが・・・・。
しかし、それでも動かん。 scrで外部URLを指定してもだめ・・・・。
しかし、知ってる方がいらっしゃいました。divで囲うとのこと。感謝!!
<div><script type=”text/javascript” src=”/script/hoge.js”></script></div>
その結果、動作! こんな感じ。 ↓
ストリートビュー画面に合わせて、マップ上の青三角形が移動します。 オーバーレイ(青い道路)表示:
MySQLのデータテーブルから全ての行を選択して表示させるためのphpファイルに記述する(全てのマーカー表示)、select文は、
次の通り(参考記事)
$query = “SELECT * FROM markers WHERE 1″;
今回は、特定のマーカーだけを、抽出選択して地図に表示させてみる。
<body onload=”onLoad()”>等のイベントをwordpress(php)でGoogle Maps APIをやる場合にどうしたらいいかなと、v3をチラ見していたら、この方のv3の記述でふと・・・window.onload ・・・・ブラウザによっては問題があるようなこともどこかのサイトに書いてありましたがまあOKで。
Scriptファイル内にbodyタグのイベント記述する方法なのですが、次のようなもの。wordpressでは重宝。
<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>