スポンサードリンク

MySQL+php+XML+Clusterer2で大量多数マーカの表示。

Google Maps API PrjectサンプルでJSONファイルを読み込んでマーカーを表示するサンプルがあった。

しかし、MYSQL→JSON→Google Maps は、私素人には無理でした。そこで、MySQL+php+XML+Clusterer2で、多くのマーカーを表示させてみることに。

◆Clusterer2とは?

◆はじめに

以前にMySQL+php+XMLで地図を表示させるサンプル()を練習したので、その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で地図を表示するサンプル

    スポンサードリンク

    Related Posts

    Leave a Comment


    NOTE - You can use these HTML tags and attributes:
    <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img localsrc="" alt="">