勉強したことのメモ

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

GoogleMapでマーカーをまとめる

   

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

 

サンプル

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

 

事前準備

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

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

 

ライブラリの読み込み

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

 

JavaScript部分

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

 

リファレンス

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

 - JavaScript

  関連記事

JavaScriptだけでTOPへ戻るリンクの表示

ページ内をある程度スクロールするとTOPへ戻るリンクを 表示させたかった。 ただ ...

異なる文字コード間でform送信する

formの送り手がUTF-8で受け手がEUC-JP、 なんとかしてjavascr ...

javascriptでスクロール

やりたかった事は、 ・javascript,jQuery使う ・スクロールさせた ...

JavaScriptで配列をループ処理(for-in)

JavaScriptでforeach使ったこと無かったけど、 配列のキーが連番じ ...

JavaScriptで三項演算子の中に三項演算子

既存のソースを作り変えている際によく分からないソースがあった。 だいぶ書き換えて ...

日付入力のテキストフォームにカレンダープラグインを導入

やりたかった事と制限は下記の通り。 ・日付入力のテキストフォームにカレンダープラ ...

JavaScriptでフォームの禁止ワード制限

掲示板等で本文を送信する際に、予め定めていた禁止ワードが含まれていないかチェック ...

javascriptでブラウザ判別&ページ遷移

var userAgent = window.navigator.userAge ...

javascriptの文末

下記みたいなコードがあって、文末に「;」が 無いのになんで動くのこれ? となった ...

JavaScriptで全角半角を判別の上で文字数カウントを行う

やりたかった事は「全角5文字・半角10文字以内の入力フォーム」 みたいなもの。 ...