スポンサードリンク

GmarkerMnager+XMLファイルで大量のマーカーを表示させてみる

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

マーカー数は、約600。

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

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

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

◆GmarkerMnager+XMLファイル

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

◆XMLファイル

ともかくUTF8で作成ね。

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

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

Read more »

ともかくGoogle Maps APIで地図を表示させる

◆Html記述

<body onload=”initialize()” onunload=”GUnload()”>

<div id=”map100″>Loading…</div>

◆script記述

<script type=”text/javascript”>
function initialize() {
if (GBrowserIsCompatible()) {
var map100 = new GMap2(document.getElementById(“map100″));
map100.setCenter(new GLatLng(35.65862, 139.74541), 9, G_NORMAL_MAP);
}
}
</script>

Read more »

マップ初期表示の地図種類を変更する

◆Google Maps APIで地図に初期表示させるマップの種類を変えてみる。 scrptの記述を変更するだけ

標準:

map.setCenter(new GLatLng(36.350527, 138.076172), 6, G_NORMAL_MAP);

航空写真:

map.setCenter(new GLatLng(36.350527, 138.076172), 6, G_SATELLITE_MAP);

航空写真+地図:

map.setCenter(new GLatLng(36.350527, 138.076172), 6, G_HYBRID_MAP);

地形:

map.setCenter(new GLatLng(36.350527, 138.076172), 6, G_PHYSICAL_MAP);

Earth:

map.setCenter(new GLatLng(36.350527, 138.076172), 6, G_SATELLITE_3D_MAP);

Read more »

+Add This

Add Thishttp://www.addthis.com/

数多くの大量のマーカー(アイコン)をGoogle地図で表示する対策方法

多量のマーカー(アイコン)をGoogle地図で表示していくととてもマップ(地図)重くなっていく。どうしたら対策になるのか。は、もちろんのだが、これが一番困る。

素人なので、あまり難しいことは出来んしな。

Google Chrome を自分の標準ブラウザで使っていたが、ある日Internet Explore 7 で自分のサイトを覗いて驚いた。多数のマーカー(アイコン)を表示しているせいで、5秒まっても地図が表示されないほど遅く重い。

何とかならんかの。

I.E7でさくさくとは言わないまでもストレスなく地図を操作できることを目的に、あれこれ調べていきますか。

今まで、やったことがあるのは、GMarkerManager。それでもアイコン(マーカー)数が増えて、1000近くなってくるとブラウザI.E7では、かんべんてな感じになってしまうので、Floatを使って、XMLからマーカを呼び出す範囲を限定してしまった始末。

Read more »

Internet Explore 7と Google Chromeの多数アイコン(マーカー)の表示速度比較

大量のマーカー(アイコン)表示のパフォーマンスチェックは、ココのサイトでやってみた。

◆GMarker

  • 50マーカー
    • Internet Explore 7 : 約0.5秒
  • 100マーカー
    • Internet Explore 7 : 約1.2秒
    • Google Chrome : 約0.2秒
  • 200マーカー
    • Internet Explore 7 : 約2.5秒
    • Google Chrome : 約0.3秒

Read more »

Google Maps 地図 無料アイコンコレクションセットダウンロード!

何と900種類以上ある無料のGoogle Maps (地図)用アイコンがあります。

グーグル-マップ-アイコン

Read more »

広告表示が無いLocal Search(Google ローカル検索)窓(バー)をGoogle AJAX Search APIで追加する。

V3用検索Google barは、コチラ

前回のローカル検索バーサンプルでは、広告が表示されるのが気に食わなかったので探してみたのが、今回のローカル検索。

Google AJAX Search APIを使用しますのでちょいと手間。ですが広告は表示されなくなりスッキリ。

今回のGoogle Maps API作業は、次の作成。

  1. Google Maps APIキー以外に、新たにGoogle AJAX Search APIキーを入手し、Google Maps APIキーと併せてHTMLへ記述しておきます。APIキーは、ここの”Google AJAX Search API の使用を開始する”で入手。
  2. さらに、スタイルシートなんぞの記述もHTML header内への記述が必要です。
  3. 併せて、距離スケール定規が隠れてしまっているので、var positionを指定して、Google検索窓の表示位置も地図左下から右下に変えてみましょうかね。

Read more »

マップ(地図)にLocal Search(Google ローカル検索)窓(バー)を追加する。

V3用検索Google barは、コチラ

Google Maps に検索窓を追加して、周辺のレストランとか検索表示できるようにしたくなります。

一番簡単なのが、次の記述をHTMLに追加するだけ。すると地図画面左下に、検索窓が追加表示されます。うーむ簡単すぎる。

広告が表示されてしまうのが残念・・・・。

Read more »

Youtube 動画を吹き出し(情報ウィンドウ/インフォウィンドウ)に表示するサンプル/Google Maps API

Google Maps V3用はコチラ

Google Maps の地図上で、アイコン(マーカー)をマウスクリックするとYoutube 動画を吹き出し(インフォウインドウ)に表示するサンプルです。
◆HTMLサンプル

<body onload=”load();onunload=”GUnload();“>
<div id=”map100″>Loading…</div>

Read more »

スポンサードリンク