var marker = createMarker(point,name,+”紹介:<br> “+mapall);
スポンサードリンク
var marker = createMarker( );
MySQL+phpからJSON形式ファイルの作成(復習)
CREATE TABLE JSON1 (
id int(11) NOT NULL auto_increment,
lat decimal(10,6) NOT NULL default’0.000000′,
lng decimal(10,6) NOT NULL default’0.000000′,
html varchar(255) NOT NULL default “,
label varchar(255) NOT NULL default “,
PRIMARY KEY (id)
) TYPE=MyISAM
◆インポートさせるデータのテキストファイル「*.txt」を作成
XMLファイルを読み込んでGoogle Mapsを表示
mysql2jsonとは?
MySQL+php+XML+Clusterer2で大量多数マーカの表示。
Google Maps API PrjectサンプルでJSONファイルを読み込んでマーカーを表示するサンプルがあった。
しかし、MYSQL→JSON→Google Maps は、私素人には無理でした。そこで、MySQL+php+XML+Clusterer2で、多くのマーカーを表示させてみることに。
◆Clusterer2とは?
◆はじめに
以前にMySQL+php+XMLで地図を表示させるサンプル(PHP+MySQLサンプル1)を練習したので、そのScriptを書き換えることにする。
いくつかの行の追加と変更でOKなので、比較的簡単でした。
◆何はともあれ、Clusterer2.jsファイルの入手する。今回は、ここからダウンロード。 海外ブログのhereと書いてあるところから
JSONファイルとXMLファイルの記述の違いを比較してみる
さて、MySQLからJOSNファイルの生成方法はわかった。
では、同じphpMyAdminのMySQLのデータテーブル「KOUEN」からどんなJSONとXMLが表示されるのか比較してみる。
Google Maps APIで、マーカーデータをダウンロードし、表示させるためには、この違いが判っていないとね・・・・。
◆先ずMySQLのデータテーブル「KOUEN」はこんな感じ。
◆MySQLテーブルの要素は、次の通り
phpファイル+XMLファイル+*.jsファイル編集可能テキストエディタ/便利なフリーソフトの
ClusterMarker サンプル用JSONファイルをMySQL+phpから作成してみる
Google Maps APIプロジェクトのClusterMarker サンプルがJSONファイルなるものを使っていた。
いままではXMLファイルにマーカー表示用の情報を直接書き込む方法、それからMySQLデータベースからphpでXMLファイルを生成させる方法を勉強したが、今回のJSONとういうファイルを作成してみる。
さて、JSONとは?
JSONはXMLと違ってマークアップ言語ではないらしい。JSONの記述ルールは次のようなもの・・・・・
true
,false
,null等は小文字とする
- 数値は、10進法のみ
- 指数表記はできる。
- 配列はコンマで区切り、[ ]でくくる。例・・・[“eat”, “run”, “skip”]
- オブジェクトは、コンマで区切り{ }でくくる。例・・・・{“name”: “ooedo onsen”, “post”: 185}
◆さて、MySQLからJOSNファイルを生成させてみよう
MarkerClustererに触れてみた。大量の多くのマーカー表示問題の解決
Google Geoブログで、Google Maps APIのアプリケーションAPI開発に重視しているソフトウェア技術者が発表した最初のライブラリに、MarkerClustererがあります。 Google Maps APIで大量のマーカーを取り扱うアプリケーション開発で問題にぶつかり(地図表示の遅れ)、それはブラウザが何千ものDOM要素を作成することのに非常に多くの処理を必要とするからだとっています(マーカーがDOM数要素の組み合わせであるため)。
そこで、クラスタリング(clustering)が良い解決になるであろうと、MarkerClustererを思いついたとのことです。 MarkerClustererとは、ラベルでマーカーを異なったクラスタに集めて、各クラスタにマーカーの数を表示するものです。地図のズームレベルが変化すると、それに併せて新しいクラスタが作成されていきます。 デモをブラウザGoogle Chromeで試すと、1000マーカーで約160msecでした(驚き!!)
◆自分でもやってみた。 驚いた!何と遅いI.E7でも2000マーカの大量のマーカー(アイコン)でも動く。ズームは、弱いが、地図の横移動はストレスがない。
パノラミオWeb API スライドショー
◆スライドショー貼り付けるアイフレーム(iframe)
<iframesrc=”http://www.panoramio.com/wapi/template/slideshow.html?user=7&width=600&height=400&delay=1.5″frameborder=”0″ width=”600″ height=”400″ scrolling=”no” marginwidth=”0″ marginheight=”0″></iframe>
<iframesrc=”http://www.panoramio.com/wapi/template/slideshow.html?user=7&width=600&height=400&delay=1.5“frameborder=”0″ width=”600″ height=”400″ scrolling=”no” marginwidth=”0″ marginheight=”0″></iframe>
スポンサードリンク