勉強したことのメモ

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
alert後にページ遷移

JavaScriptのalertが閉じたらページ遷移させてほしいと言われ、con ...

javascript_logo_unofficial-300x300
JavaScriptでinputタグのtypeを変更

チェックボックスの状態によって inputタグのtypeをtext⇔passwo ...

javascript_logo_unofficial-300x300
getElementsByTagName

うろ覚えだけど業務中に、 document.getElementById('aa ...

mzl.qobqfuxq
JavaScriptで住所から経度緯度を取得する

やりたかった事はformに住所を入れてsubmitする際に、javascript ...

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

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

javascript_logo_unofficial-300x300
CSSとJavaScriptでテキストのコピー防止

あるサイトで文言の意味が分からずGoogleで検索する為にコピペしようとするも、 ...

javascript_logo_unofficial-300x300
JavaScriptの三項演算子

いつもと違う書き方? 使い方の三項演算子が あったのでメモ。 ■ソース var ...

javascript_logo_unofficial-300x300
JavaScriptで年齢計算

JavaScriptで年齢計算。 ■ソース function ageCalcul ...

javascript_logo_unofficial-300x300
JavaScriptで連想配列を数値でソート

数字の大きい順でソートしたかったんだけど、 色々調べてhash.sort云々やっ ...

images
PHPの配列をファイルに保存してPHPやJSで呼び出す

PHPの配列をファイルとして保存し、別のページからPHPやJavaScriptで ...