Q&A
何を参考にここまで掛かれたのでしょう。
また、固定値しかないならあえてJavaScriptでscriptタグを追加するメリットはないと思うのですが、
あえてそうしている意図は何でしょうか。
エラーがあるかないかはどこを見ての判断ですか？
現在の状態も画面キャプチャなどでご提示ください。
実現したいこと
- htmlコードを修正しgooglemap表示できるようにしたいです
以下のコードでgooglemap上に任意のピンを立てて表示したいのですが、mapの一切が表示されません。（左上にタイトルのみ出ます）
初心者のため、初歩的なミスが何かあるのだと思いますがどうぞよろしくお願いいたします。
なお、コードはChatGPTで生成しています。
発生している問題・エラーメッセージ
マップやピンが一切表示されません。エラーメッセージは特に何もありません。
該当のソースコード
APIキーはセキュリティ上***として表示します。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>将棋棋士の出身地マップ</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <style> #map { height: 80%; width: 80%; margin: 0 auto; } </style> </head> <body> <h1>将棋棋士の出身地マップ</h1> <div id="map"></div> <script> // 将棋棋士のデータ（出身地、棋士名、棋士番号） const shogiPlayers = [ { location: { lat: 35.6828, lng: 139.759 }, name: "羽生善治", number: 1 }, { location: { lat: 35.6951, lng: 139.757 }, name: "藤井聡太", number: 2 }, { location: { lat: 43.0642, lng: 141.3469 }, name: "佐藤康光", number: 3 }, { location: { lat: 35.6938, lng: 139.7032 }, name: "加藤一二三", number: 4 }, { location: { lat: 36.325, lng: 139.536 }, name: "渡辺明", number: 5 } ]; // 地図を表示するための関数 function initMap() { const center = { lat: 38, lng: 138 }; // 地図の中心を設定 const map = new google.maps.Map(document.getElementById("map"), { zoom: 5, // 地図のズームレベルを5に設定 center: center }); // 将棋棋士のマーカーを配置する for (let i = 0; i < shogiPlayers.length; i++) { const marker = new google.maps.Marker({ position: shogiPlayers[i].location, map: map, title: shogiPlayers[i].name, label: { text: String(shogiPlayers[i].number), color: "white" } }); // マーカーをクリックしたときにポップアップを表示する marker.addListener("click", function() { // 現在表示している全ての情報ウィンドウを閉じる for (let j = 0; j < infoWindows.length; j++) { infoWindows[j].close(); } infoWindows = []; const infoWindow = new google.maps.InfoWindow({ content: `<div><p>棋士番号: ${shogiPlayers[i].number}</p><p>名前: ${shogiPlayers[i].name}</p></div>` }); infoWindow.open(map, marker); // 情報ウィンドウが閉じられたときにinfoWindows配列から削除する infoWindow.addListener("closeclick", function() { const index = infoWindows.indexOf(infoWindow); infoWindows.splice(index, 1); }); infoWindows.push(infoWindow); }); } } let infoWindows = []; // 全ての情報ウィンドウを格納する配列 // Google Maps JavaScript APIを読み込む（APIキーは適宜書き換えること） const script = document.createElement("script"); script.src = "https://maps.googleapis.com/maps/api/js?key=***&callback=initMap"; script.defer = true; script.async = true; // HTMLの<head>要素の最後にスクリプトを追加する document.head.appendChild(script); </script> </body> </html>
試したこと
GCP側でMaps JavaScript APIはアクティベートしていることを確認済です。
また、制限を付けておらずどこからでもアクセス可能です。
補足情報（FW/ツールのバージョンなど）
Chromeバージョン: 112.0.5615.138
OS:Windows10
回答2件
0
自己解決
回答くださりありがとうございます。
ご提案いただいた内容で試行してみましたが状況は変わりませんでした。
そこで改めてコードを精査してみましたが、
<style>
html, body { height: 80%; margin: 0; padding: 0; }
#map { width:80%; height:500px; margin: 0 auto; }
</style>
に変更するだけでマップ表示できるようになりました。
ありがとうございました。
投稿2023/04/26 13:10
総合スコア10
0
// Google Maps JavaScript APIを読み込む（APIキーは適宜書き換えること） const script = document.createElement("script"); script.src = "https://maps.googleapis.com/maps/api/js?key=***&callback=initMap"; script.defer = true; script.async = true; // HTMLの<head>要素の最後にスクリプトを追加する document.head.appendChild(script);
上のコードをを削除して、以下のコードを挿入してみてください。
</body> <script async defer src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap"></script> </html>
投稿2023/04/26 06:42
総合スコア24
あなたの回答
tips
プレビュー
