いつも参考にさせていただいております。
Google Mapを使用したサンプル【顧客訪問リストを地図にピン表示する】
https://cybozudev.zendesk.com/hc/ja/articles/202341964
の改良を試みておりますが、現在行き詰っており、
アドバイスを頂きたく思います。
■やりたいこと
1.ポインタにマウスをのせるとそのレコードの主要情報を吹き出しで表示
2.ポインタクリックでレコード詳細画面へ移動
簡単に思っていましたがなかなかうまくいきません。
何卒よろしくお願いします。
サンプルの中で、markerを作ったあとで、
marker[i] = new google.maps.Marker({・・・・
そのmarkerにたいして、
google.maps.event.addListenerで、イベント（マウスオーバー、クリック）に対応した処理を追加してあげればできませんですかね？
どのへんで、うまくいかないのでしょうか。
鈴木さん
新妻さんが書いてある「google.maps.event.addListener」や「infowindow」、「マーカー」等をキーワードにしてググればサンプルが出てくるかと思います。
私のブログでkViewer用ですがこちらで近いことをやっています。
http://yamaryu0508.hatenablog.com/entry/2014/10/09/231002
1については既出ですが、イベントをmouseoverに引っかければ良いと思います。
2については、infowindowでHTMLを入れるところで、こんな感じで書いてあげると良いんじゃないかと思います。
var url = location.protocol+‘//’+location.hostname+‘/k/’+kintone.app.getId()+‘/show#record=’+event.records[i][‘$id’][‘value’];
var link = ‘<a href = "’ + url + ‘">’ + ‘レコード詳細’ +‘</a>’;
infowindow.setContent( '<br> ’ + link + ‘</b>’);
いかがでしょうか？
新妻正夫さん
Ryu Yamashitaさん
アドバイスありがとうございます。
返答が遅くなりまして申し訳ございません。
現状は１のマウスオーバーは保留にし、まずは２の実装に取り組んでいます。
が、また一つ問題が・・・。
Ryu Yamashitaさんより記入いただいたコードを取り入れ、
無事吹き出しとリンクが出来ましたが、なぜか違うレコードの詳細画面に
飛んでしまいます。
原因として可能性があるのは
+event.records[i][‘$id’][‘value’];
の部分にあるのかと思い、いろいろ試していますが
まだ解決できておりません。
できましたらご指南お願いします。
// 地図の要素を定義します
var map = new google.maps.Map(document.getElementById('map'), opts);
var marker = new Array();
var m_latlng = new Array();
var infowindow = new google.maps.InfoWindow();
// 緯度・経度をもとに、地図にポインタを打ち込みます
for (i=0; i < lat.length ; i+=1){
if (isNaN(lat[i]) === false && isNaN(lng[i]) === false){
m_latlng[i] = new google.maps.LatLng(lat[i],lng[i]);
marker[i] = new google.maps.Marker({
position: m_latlng[i],
map: map,
// ポインタのアイコンは Google Charts を使用します
icon: 'https://chart.googleapis.com/chart?chst=d_bubble_text_small&chld=edge_bc|' + recno[i] + '|FF8060|000000'
});
google.maps.event.addListener(marker[i], 'click', (function(marker, i) {
return function() {
var url = location.protocol+'//'+location.hostname+'/k/'+kintone.app.getId()+'/show#record='+event.records[i]['$id']['value'];
var link = '<a href = "' + url + '">' + 'レコード詳細' +'</a>';
infowindow.setContent( recno[i] + '<br> ' + link + '</b>');
infowindow.open(map, marker[i]);
}
})(marker, i));
} //if
} //for
鈴木さん
飛んでしまいます。
原因として可能性があるのは
+event.records[i][‘$id’][‘value’];
飛び方に規則性等特徴はありませんでしょうか？
原因はご指摘箇所周辺ではないかと思います。スニペットの中にも記述頂いていますが、このサンプルはrecnoを持っていますので、置き換えてみてはいかがでしょうか？
Ryu Yamashitaさん
アドバイスありがとうございます。
recnoでの置き換えで無事解決できました！
飛び方の規則性等特徴までは見つけることができませんでした。
おそらく レコードID ≠ レコード番号 が原因かと思います。
後学のためもう一つ質問をよろしいでしょうか？
（初歩的な質問かもしれませんが・・・。）
レコード番号とレコードIDは、基本的に同じ数値になるものと（勝手に）思っていましたが、
元々それぞれ違う数値が入るものなのでしょうか？
それとも何かしらの条件が発生した場合のみ異なる数値になるのでしょうか？
鈴木さん
https://cybozudev.zendesk.com/hc/ja/articles/202166330
こちらの冒頭に説明がありますが、いずれもレコードに対してユニークに割り当てられるのですが、アプリコードが指定された場合にレコード番号は数値でなくなり、APIの利用に際しては必ず数値になるレコードIDの利用が促されています。なお、歴史的にレコードIDは後発でしたので、レコード番号をAPIで利用しているサンプルも残っているという感じだと思います。
アプリコードが無ければ両者は一致すると思われますが、・・・。
回答ありがとうございます。
レコードIDが後発なのは初めて知りました。
勉強になりました。
ありがとうございます！