顧客訪問リストを地図にピン表示する
に従い、顧客リストに緯度（lat)、経度（lng）、スペース（Map)を追加しました。住所はxxxx部分を実在住所に入替ました。
GoolgeのAPIを登録し、Javascriptをsample.jsとしてアップロードしました。
その結果、詳細画面にGoogleマップとマーカーは表示されます。
ただ、一覧画面上部にはGoogleマップは表示されるものの各住所のマーカーが表示されません。どうすれば良いでしょうか？
https://cybozu.dev/ja/id/42b1d7ce01fd5d9b53dbf4df/#reference-guide-2
デバッグためしてみてエラーなどないか確認してみてください
また、JSのコードも変更点などあれば提示してみると回答があつまりやすいかとおもいます
muraさん、コメントありがとうございます。
顧客訪問リストにGoogle APIキーを入れただけで、他はいじってません。詳細画面にはちゃんとGoogleマップと正しい場所のマーカーが表示されます。
一覧画面にもGoogleマップは表示されるのでAPIキーの問題とは思えません。
一覧画面でのGoogleマップのマーカー表示部分に問題があるのだと思いますが、Japascriptを眺めていてもどこに問題があるか分かりません。
デバッグためしてみてエラーなどないか確認してみてください
こちらはなにかでてますかね？
下記などを参考にみてみてください
https://cybozu.dev/ja/id/42b1d7ce01fd5d9b53dbf4df/#methods-list-1
(質問者ではありませんが)
確認したところエラー出ていませんでしたが警告は出ていました。
// 緯度・経度をもとに、地図にポインタを打ち込みます
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'
});
}
}
のicon部分を削除したところピンが表示されるようになりました。
// 緯度・経度をもとに、地図にポインタを打ち込みます
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を使用します
以下の部分でした。
しかし、
As of February 21st, 2024, google.maps.Marker is deprecated.
とあるように移行が必要そうです。
Deprecations | Google Maps Platform | Google for Developers
高度なマーカーに移行する | Maps JavaScript API | Google for Developers
「いいね！」 2
aaaさん、アドバイスありがとうございます。私の方でも、以下をコメントアウトすると一覧画面にマーカーが表示されることを確認できました。
icon: ‘https://chart.googleapis.com/chart?chst=d_bubble_text_small&chld=edge_bc|’
+ recno[i] + ‘|FF8060|000000’
Google Maps Platformの「高度なマーカーに移行する」に「google.maps.Marker（v3.56）は、2024 年 2 月 21 日にサポートが終了しました。」と書かれているので、これが影響してるのでしょうね。
単純にこの部分を削除するとマーカーは1種類に固定されます。「高度なマーカーに移行する」を手本にコードをそれらしく切り替えてみましたが、力不足でレコード毎に別のマーカーを表示させることはできませんでした。
Webを探すと高度なマーカーの使い方記事が幾つも見当たりますが、ちょっと私の手におえそうもありません。とりあえず１種類のマーカーが表示されただけでも良しとしたいと思います。その内、どなたかが解決策を提示していただけることを期待しながら。
「いいね！」 1
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。