Google MAP APIで地図表示はよくある事でしたが
今回は、表示する地点の数が多かったので、通常表示すると赤ピンで地図が埋まってしまう・・・・
という想像しただけで怖い絵が浮かんでしまうので、マーカークラスター表示に挑戦してみました。
マーカークラスター自体は、公式にサンプルコードと共に説明があるので、
特に難しいことは無し・・・・・
https://developers.google.com/maps/documentation/javascript/marker-clustering
今回は、クラスター表示しながら
・ピンの表示を変える
・吹き出しをつける
この２点が本命のカスタマイズです。
他でも使いまわしできそうです。
事前に、https://github.com/googlemaps/js-marker-clustererから、
markerclusterer.jsと表示用のImageをダウンロードしてサーバーに設置しておいてください。
出来ちゃえば簡単なんですけど、途中で色々と迷子になったのでまとめておきます。
<script>
var _placeMarkers = [];
var locations1 = [{name: “【地点名】”, lat: 【緯度】, lng: 【経度】},{name:【地点名】”, lat: 【緯度】, lng: 【経度】}]
var locations2 = [{name: “【地点名】”, lat: 【緯度】, lng: 【経度】},{name:【地点名】”, lat: 【緯度】, lng: 【経度】}]
function initMap() {
//地図表示
var map = new google.maps.Map(document.getElementById(‘map’), {
zoom: 12,
center: {lat:【地図の中心の緯度】, lng:【地図の中心の経度】},
minZoom : 10,
maxZoom : 18
});
//地図に２種類の地点を表示するので１種類目の地点情報（通常表示）
locations1.forEach(function (val, index, arr) {
//１種類目の、位置情報とマーカーとサイズ
var marker = new google.maps.Marker({
position: {lat:val.lat, lng:val.lng},
icon: {
url: ‘【公開ＵＲＬ】/img/favicon.ico’,
scaledSize: new google.maps.Size(40,40)
},
map: map
});
//１種類目は、吹き出し表示を設定する
google.maps.event.addListener(marker, ‘click’, function (event) {
new google.maps.InfoWindow({
content: ‘<p>’ + val.name + ‘</p>’
}).open(marker.getMap(), marker);
});
});
//地図に２種類の地点を表示するので２種類目の地点情報（クラスター表示）
//クラスター表示の時に、吹き出しを出さないので、書いてませんが、「InfoWindow」で吹き出しも出せます。
locations2.forEach(function (val, index, arr) {
//２種類目の、位置情報とマーカーとサイズ
var marker = new google.maps.Marker({
position: {lat:val.lat, lng:val.lng},
icon: {
url: ‘【公開ＵＲＬ】/img/map_icon.png’,
scaledSize: new google.maps.Size(40,40)
},
map: map
});
//クラスター表示をするために、作成したマーカー情報を配列に保存する
_placeMarkers.push(marker);
});
//マーカーをＡＰＩを使ってクラスター表示させる
var markerCluster = new MarkerClusterer(map, _placeMarkers,
{imagePath: ‘【公開ＵＲＬ】/js/js-marker-clusterer/images/m’}
);
}
</script>
こんな感じで、クラスター表示できます。
今回、住所から緯度経度をAPIで取得する事も出来たのですが
件数が多すぎて、変換だけで１日当たりのＡＰＩアクセス件数を超えてしまうので断念しました・・・・
アクセス制限数を考えなければ、住所だけあれば緯度経度を取得してと思ったのですが
よくよく考えたら、事前に緯度経度を持ってた方が処理が早かったので
結果オーライでした(;^ω^)
