WordPressにGoogle Maps API V3！

さて、たくさんの大量マーカー（アイコン）を表示させる方法として、GmarkerMnagerに挑戦。

マーカー数は、約600。

ブラウザGoogle Chromeでアクセスしてみる。
おっ　動く。読み出しも1秒とかからない。さくさくか？

次は、IE7でアクセス・・・・・・・おっ・・・・しかし、ズーム、地図移動がいまいち。なんとかというレベル。

これ以上マーカーが増えてたくさんになったら、多量のマーカー表示は出来そうもない。

◆GmarkerMnager+XMLファイル

作成済みXMLファイルを読み込んで、GmarkerMnagerで+XMLファイルで大量のマーカーを表示させてみることに

◆XMLファイル

ともかくUTF8で作成ね。

XMLファイルサンプル （※Google Chrome使用の方は、ページのソース表示で確認してください）

◆XMLファイルへのズームの設定とGmarkerMnagerでのマーカー表示

• XMLファイル中に、zoom=”5″～zoom=”17″を設定。

<marker  zoom=”6″ lat=”39.433071″ lng=”141.057501″ category=”kouen” name=”花巻広域公園　ぎんがのもり&lt;a href=’http://waotabi.web.fc2.com/kouen/iwate-hanamaki.html’ target=’_blank’&gt;>詳細&lt;/a&gt;&lt;br&gt;→総合公園” ename=” ” mapall=”詳細をクリック”/>

• XMLファイルを呼び出す

GDownloadUrl(“http://waox.main.jp/news/maps/googlemapsapi/example/kouen.xml”, function (doc) {

• Scriptでgmarkers5～17を指定

var gmarkers5 = [];

var gmarkers6 = [];

var gmarkers7 = [];

var gmarkers8 = [];

var gmarkers9 = [];

var gmarkers10 = [];

var gmarkers11 = [];

var gmarkers12 = [];

var gmarkers13 = [];

var gmarkers14 = [];

var gmarkers15 = [];

var gmarkers16 = [];

var gmarkers17 = [];

• var mm = new GMarkerManager(mapwidth100, {borderPadding:1});・・・でGmarkerMnager
• 表示する各gmarkersを作成

if (parseInt(zoom) > 17) {

var marker = createMarker(point,name,html); // すべて

gmarkers17.push(marker);

}

else if (parseInt(zoom) > 16) {

var marker = createMarker(point,name,html); // すべて

gmarkers16.push(marker);

}

else if (parseInt(zoom) > 15) {

var marker = createMarker(point,name,html);// すべて

gmarkers15.push(marker);

}

else if (parseInt(zoom) > 14) {

var marker = createMarker(point,name,html); // すべて

gmarkers14.push(marker);

}

else if (parseInt(zoom) > 13) {

var marker = createMarker(point,name,html,category); // すべて

gmarkers13.push(marker);

}

else if (parseInt(zoom) > 12) {

var marker = createMarker(point,name,html,category); // すべて

gmarkers12.push(marker);

}

else if (parseInt(zoom) > 11) {

var marker = createMarker(point,name,html,category); // すべて

gmarkers11.push(marker);

}

else if (parseInt(zoom) > 10) {

var marker = createMarker(point,name,html,category); // すべて

gmarkers10.push(marker);

}

else if (parseInt(zoom) > 9) {

var marker = createMarker(point,name,html,category); // すべて

gmarkers9.push(marker);

}

else if (parseInt(zoom) > 8) {

var marker = createMarker(point,name,html,category); // すべて

gmarkers8.push(marker);

}

else if (parseInt(zoom) > 7) {

var marker = createMarker(point,name,html,category); // すべて

gmarkers7.push(marker);

}

else if (parseInt(zoom) > 6) {

var marker = createMarker(point,name,html,category); // すべて

gmarkers6.push(marker);

}

else if (parseInt(zoom) > 5) {

var marker = createMarker(point,name,html,category); // すべて

gmarkers5.push(marker);

• マーカーの地図への書き出し

mm.addMarkers(gmarkers5,5,17);

mm.addMarkers(gmarkers6,6,17);

mm.addMarkers(gmarkers7,7,17);

mm.addMarkers(gmarkers8,8,17);

mm.addMarkers(gmarkers9,9,17);

mm.addMarkers(gmarkers10,10,17);

mm.addMarkers(gmarkers11,11,17);

mm.addMarkers(gmarkers12,12,17);

mm.addMarkers(gmarkers13,13,17);

mm.addMarkers(gmarkers14,14,17);

mm.addMarkers(gmarkers15,15,17);

mm.addMarkers(gmarkers16,16,17);

mm.addMarkers(gmarkers17,17,17);

mm.refresh();

◆GmarkerMnager+XMLファイル

• 公園地図サンプル

スポンサードリンク