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と書いてあるところから
Download rar file here.
This rar contains:
- phoogle2.php
- Clusterer2.js
- fsaddon.js
prototype.js
◆Script記述
追加・変更したのは、次の箇所だけ。詳細は、下部サンプルリンク先の地図のソースで確認してください。
//上記ダウンロードした「Clusterer2.js」ファイルを指定
<script src=”Clusterer2.js” type=”text/javascript”></script>
//クラスター用の大きいまとめるアイコンを指定
var clusterIcon = new GIcon();
clusterIcon.image = “http://waox.main.jp/news/maps/googlemapsapi/example/icons/arrow.png”;
clusterIcon.shadow = “http://waox.main.jp/news/maps/googlemapsapi/example/icons/arrow_shadow.png”;
clusterIcon.iconSize = new GSize( 51, 51 );
clusterIcon.shadowSize = new GSize(70, 30);
clusterIcon.iconAnchor = new GPoint( 13, 34 );
clusterIcon.infoWindowAnchor = new GPoint( 13, 3 );
clusterIcon.infoShadowAnchor = new GPoint( 37, 37 );
//クラスター生成
var clusterer = new Clusterer(map);
// clustererパラメータの設定
clusterer.icon = clusterIcon;
clusterer.maxVisibleMarkers = 100;
clusterer.gridSize = 5;
clusterer.minMarkersPerClusterer = 5;
clusterer.maxLinesPerInfoBox = 6;
// クラスターオブジェクトを生成
clusterer.AddMarker(marker,name);
◆Clustererを追加したMySQL+php+XMLで地図を表示するサンプル
関連記事一覧
スポンサードリンク
Leave a Comment