勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

GoogleMapでマーカーをまとめる

   

GoogleMapAPIでマーカーを複数表示し、近隣のエリアごとにまとめて表示させたかった。調べたところGoogle公式でAPIが用意されていた。以下に作成方法のメモ。

 

サンプル

http://sample.taitan916.info/clusterer/

 

事前準備

マーカーの表示と自動ズームが入ったマップの作成に関しては以前の記事のものを使用した。

http://taitan916.info/blog/?p=2403

 

ライブラリの読み込み

以下でライブラリを読み込んでおく。

 

JavaScript部分

コメントを入れてある部分が以前の記事のソースとは異なる部分になる。

 

リファレンス

https://developers.google.com/maps/documentation/javascript/marker-clustering?hl=ja

 - javascript

  関連記事

javascript_logo_unofficial-300x300
IEでjavascript関数の初期値

あるJavaScriptの関数でchromeやfirefoxは正常に動いたけどI ...

mzl.qobqfuxq
GoogleMapでメインカラーを変更する方法

GoogleMapAPIを用いたMAPでカラー変更をしたかった。カラーコードの指 ...

javascript_logo_unofficial-300x300
javascriptの注意点

javascriptにてチェックボックスのチェック状況をチェックを ループでまわ ...

mzl.qobqfuxq
GoogleMapsAPIでマーカーが全て表示されるように自動ズーム

GoogleMapsAPIでマーカーを複数設置した場合にズームの値や、マーカーの ...

javascript_logo_unofficial-300x300
jQueryやJavaScriptで認識違いしていたところのメモ(高速化)

認識違いしていたり、知らなかったりでもっと高速な 処理を行えそうな点があったので ...

android_logo2-300x224
Android2.3でJavaScriptのエラー

Android2.3で関数が動かないといったエラーが発生していた。 担当外だった ...

javascript_logo_unofficial-300x300
javascriptでメモリ開放

今まで考えたこと無かったけどjavascriptを使う際は メモリ消費に気をつけ ...

javascript_logo_unofficial-300x300
setTimeoutの注意点

javascriptのsetTimeoutにて変数を用いた際に 想定外の挙動を起 ...

javascript_logo_unofficial-300x300
javascriptのtry文

javascriptとかjQueryを使ってて、Firefox,chromeはい ...

javascript_logo_unofficial-300x300
時間差をつけて処理する

setTimeout( 処理, タイムアウト時間 ); で、時間差をつけて処理が ...