プロマネさん！ 死ですよ！ 死！！（裏声）
デザイナーさんからすごくきれいなデザインモックが飛んできてお客様確認済みで内部設計とか実装は丸投げで取り敢えずマーカーのクラスタリングとラベル改造は必須だということになったらそれぞれいい感じのライブラリはあったんですけどそこの食い合わせがなかなかに悪かったりして血泡吹きながらあれそれしています。しかもデザインがXDだからHTMLから起こさなきゃいけないとかいうバックエンドエンジニア殺し。保守性は死んだ！ もういない！ 貴様の行為は炎上案件に油を注ぐだけだ！
Q.火を付けたのは誰ですか？
A.空気を圧縮すると温度が上がりますね。納期も圧縮すると温度が上がって燃えますね。それだけです。はいでは行ってみよう〜〜〜〜
ピンにマウスをかざした時にピンの画像を変えたい
はい。
var normalIcon = "hogehoge.png";
var hoverIcon = "fugafuga.png";
google.maps.event.addListener(icon.marker, 'mouseover', (function(icon){
return function(){
this.setIcon({
url: icon
});
};
})(hoverIcon));
google.maps.event.addListener(icon.marker, 'mouseout', (function(icon){
return function(){
this.setIcon({
url: icon
});
};
})(normalIcon));
表示範囲で拡大縮小ボタンを付けたい
つまるところ「1km」ってボタンを押したらマップ中心から1kmの範囲が表示されてほしいと。
地球上の任意の座標を中心とした円を描き座標を取れと。
$(".zoom_m").on('click',function(){
var distance = $(this).attr('data-distance');
var center = gmap.getCenter();
// 緯度一度110942.97m
var lngRadix=110942.97;
var lngDiff = distance / lngRadix;
var west = center.lng() - lngDiff;
var east = center.lng() + lngDiff;
// var pi = 3.1415926535898; // 円周率近似値
var r = 6378137; // 地球の半径（m）
var c = Math.cos(center.lat() / 180 * Math.PI) * 2 * Math.PI * r; // 任意の緯度の円周（km）
var latRadix = c / 360; // 経度 1度あたりの km
var latDiff = distance / latRadix;
var north = center.lat() - latDiff;
var south = center.lat() + latDiff;
//北西端の座標を設定
var sw = new google.maps.LatLng(south,west);
//東南端の座標を設定
var ne = new google.maps.LatLng(north,east);
//範囲を設定
bounds = new google.maps.LatLngBounds(sw, ne);
gmap.fitBounds(bounds,5);
});
これもっとマシな実装は無かったんだろうか……。
マーカーのラベルをきれいにしたい
デザイナさんのデザインはとてもきれいなのでフォントも色も縁取りも指定されていますが素のGoogleMapにそんな機能はないのでLabeledMarkerを導入します。
LabeledMarker
参考はこちら : GoogleMapでカスタム可能なラベルを持つマーカー – Qiita
先人の叡智……うめ……うめ……
ソース編集
LabeledMarkerを追加してもまだまだ要件に足りないのでソースに手を突っ込みます。まあCSSクラス追加しただけなんですけどコピペだけで動くなんてそんなオイシイ話は無いわね。
LabeledMarker.prototype.createLabel = function (labelOptions) {
var label = new google.maps.OverlayView();
label.parent = this;
label.bindTo('map', this);
label.bindTo('position', this);
label.onAdd = function () {
var el = document.createElement('div');
el.style.position = labelOptions.style.position || 'absolute';
// el.innerHTML = labelOptions.innerHTML || '<div>' + labelOptions.text + '</div>';
el.innerHTML = labelOptions.innerHTML || '<div class="label">' + labelOptions.text + '</div>';
this.el = el;
var panes = this.getPanes();
panes.overlayLayer.appendChild(el);
}
...
あとなんか使ってないソースは消した。
あとは.labelに対してデザイン作るだけなので余裕（余裕とは言ってない）。
近隣のマーカーをクラスタリングしたい
MarkerClusterer
MarkerClusterer自体は有名なので探せばいくらでも資料があるので大丈夫です。使い方もそんなに難しくない。
ただし今回の場合LabeledMarkerとの兼ね合いがあったので暫定的にこう書いた（取り敢えず動いた）
var markers = [];
// LabeledMarker
var icon = new LabeledMarker(gmap,{
icon: {
url: normalIcon
},
map: gmap,
position: latLng
},{
text: data.title,
style:{
}
});
// LabeledMarkerがインスタンス変数（って言うのはJavaScriptてきに正しいんだろうか？）として持っているmarkerだけを渡す
markers.push(icon.marker);
var markerCluster = new MarkerClusterer(gmap, markers,
{
styles: [
{
textColor: 'white',
url: '<?= get_stylesheet_directory_uri() ?>/images/piyopiyo.png',
height: 30,
width: 30
}
],
zoomOnClick:false
});
クラスタリングされたマーカーのラベルを非表示にしたい
ただ今より毒ガス訓練を開始する！！(ｶｯ)
現状だとクラスタリングされたマーカーのラベルが出っぱなしで、ごちゃごちゃして見苦しいのです。縮小に合わせてラベルを消し、拡大に合わせてラベルを表示します。
いろいろ調べた結果（二日くらいかかった）、MarkerClustererからラベルが見えていないという割と当たり前の事実に突き当り、ソースを修正。
markers.push(icon);
LabeledMarkerの中のmarkerだけをMarkerClustererに渡していたところをまるごと渡すように修正。
それからMarkerClustererも修正。具体的には、markerを参照しているところをmarker.markerに書き換え。ちなみに一発置換とかやっても動かないです。はははちょっとした地獄だった。道は前にしか開かれません。進みましょう。
google.maps.Markerの内容が見たいときはmarker.markerにアクセス、管理はmarkerごとっていう具合になると思います。変数名はちゃんと変えた方がいいと思いますけどいっぺんにやると何でバグってるかわからなくなって血を吹くので注意。
そしてこう
Cluster.prototype.addMarker = function(marker) {
if (this.isMarkerAlreadyAdded(marker)) {
return false;
}
if (!this.center_) {
this.center_ = marker.marker.getPosition();
this.calculateBounds_();
} else {
if (this.averageCenter_) {
var l = this.markers_.length + 1;
var lat = (this.center_.lat() * (l-1) + marker.getPosition().lat()) / l;
var lng = (this.center_.lng() * (l-1) + marker.getPosition().lng()) / l;
this.center_ = new google.maps.LatLng(lat, lng);
this.calculateBounds_();
}
}
marker.marker.isAdded = true;
this.markers_.push(marker);
var len = this.markers_.length;
if (len < this.minClusterSize_ && marker.marker.getMap() != this.map_) {
// Min cluster size not reached so show the marker.
marker.marker.setMap(this.map_);
// クラスタリングされていないピンのラベルを表示
$(marker.label.el).children('.label').show();
}
if (len == this.minClusterSize_) {
// Hide the markers that were showing.
for (var i = 0; i < len; i++) {
this.markers_[i].marker.setMap(null);
// クラスタリングされたピンのラベルは非表示
$(this.markers_[i].label.el).children('.label').hide();
}
}
if (len >= this.minClusterSize_) {
marker.marker.setMap(null);
// クラスタリングされたピンのラベルは非表示
$(marker.label.el).children('.label').hide();
}
this.updateIcon();
return true;
};
同じ住所の複数テナントの処理
同じビルに複数のテナントが入っている場合がある。どれだけ拡大してもピンがクラスタリングされたままになって、いつまでも情報を取ることができないので困る。
参考はこちら : GoogleMapAPIでMarkerClustererを利用した時のマーカークリックについて – teratail
上記を参考にしながらクラスタの横にマーカーを追加してデータの取得はそっちで行うみたいな（伝われ）ことにしました。
google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
gmap.panTo(new google.maps.LatLng({
lat: cluster.center_.lat(),
lng: cluster.center_.lng()
}));
var zoom=gmap.getZoom()
if(zoom<18){
// ズームレベル18までは普通にズームする
// 一個ずつズームするのちょっとだるいのでいい方法があれば修正はしたい
gmap.setZoom(++zoom);
}else{
var i=0;
// 同じ住所でも微妙に座標が違うとかめんどくさかったので近所の住所は同じ座標で扱う
var lat=cluster.markers_[0].marker.data.latitude;
var lng=cluster.markers_[0].marker.data.longitude;
cluster.markers_.forEach(function(e){
var latLng = new google.maps.LatLng({
lat: parseFloat(lat)-(0.1+i)/5000,
lng: parseFloat(lng)+1/5000
});
i++;
});
}
});
MarkerClustererの自動ズームは切ってズームレベルをいちいち確認しながら挙動を分けました。
そもそも登録画面を住所だけにして座標は自動取得とかにしておけばいいのに座標まで手作業で設定するから微妙に数字がズレていたり緯度と経度がひっくり返っていたりして死です死。
座標変えて表示しちゃってるけどまあどうせ詳細見る場所はあるのでだいじょうぶだいじょうぶ。
これは常々思っていることなんですけど営業とプログラマーの間にシステムエンジニアが生まれたようにデザイナーとプログラマーの間にも何かのクッションが必要だ。そうじゃなければ下流のプログラマがしぬ
