Q&A実現したいこと
東京タワーのアイコンをクリックすると情報ウィンドウが開くようにしたい。
情報ウィンドウが開いた状態での表示はできています。
addEventListenerを使って、クリックしたときに開くようにしたいです。
発生している問題・分からないこと
infowindow.open(map, marker1);は実現しています。
marker1.addEventListener("click", function () {
infowindow.open(map, marker1);
});
だとアイコンをクリックしても表示できない。
コードの最後の// window.initMap = initMap;がよくわからない
該当のソースコード
main.js
1function initMap() { 2 var akiba = { lat: 35.6982, lng: 139.774256 }; 3 var tokyoTower = { lat: 35.658581, lng: 139.745433 }; 4 5 var map = new google.maps.Map(document.getElementById("map"), { 6 zoom: 12, 7 center: akiba, 8 }); 9 10 marker1 = new google.maps.Marker({ 11 position: tokyoTower, 12 map: map, 13 title: "東京タワー", 14 icon: { 15 url: "https://assets.codeprep.jp/books/googlemap/tokyo_tower.png", 16 scaledSize: new google.maps.Size(50, 100), 17 }, 18 }); 19 20 var infowindow = new google.maps.InfoWindow({ 21 content: `<div> 22 <h3>東京タワー</h3> 23 <p>とても大きい</p> 24 </div>`, 25 position: tokyoTower, 26 }); 27 28 // infowindow.open(map, marker1); 29 marker1.addEventListener("click", function () { 30 infowindow.open(map, marker1); 31 }); 32} 33// window.initMap = initMap;
index.html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>情報ウィンドウを表示する(2)</title> 6 <link 7 rel="stylesheet" 8 href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 9 /> 10 <link rel="stylesheet" href="./css/main.css" /> 11 <script 12 async 13 defer 14 src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB18K9EOExTMmUaiOgJiRFaLxxxxx&callback=initMap" 15 type="text/javascript" 16 ></script> 17 <script src="./js/main3.js"></script> 18 </head> 19 <body> 20 <div class="form row"> 21 <div class="col-md-1 col-sm-2"> 22 <select id="cities class=form-control"> 23 <option value="東京">東京</option> 24 <option value="大阪">大阪</option> 25 <option value="名古屋">名古屋</option> 26 <option value="札幌">札幌</option> 27 <option value="福岡">福岡</option> 28 <option value="高松">高松</option> 29 <option value="那覇">那覇</option> 30 </select> 31 </div> 32 </div> 33 <div class="map"> 34 <div id="map">ここにMapを表示</div> 35 </div> 36 <div class="events"> 37 <h3>メッセージ</h3> 38 <div id="messages"></div> 39 </div> 40</body> 41</html>
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
デベロッパーツールのエラー内容です。
js?key=AIzaSyB18K9EO…allback=initMap:276 Google Maps JavaScript API has been loaded directly without loading=async. This can result in suboptimal performance. For best-practice loading patterns please see https://goo.gle/js-api-loading
js?key=AIzaSyB18K9EO…allback=initMap:198 As of February 21st, 2024, google.maps.Marker is deprecated. Please use google.maps.marker.AdvancedMarkerElement instead. At this time, google.maps.Marker is not scheduled to be discontinued, but google.maps.marker.AdvancedMarkerElement is recommended over google.maps.Marker. While google.maps.Marker will continue to receive bug fixes for any major regressions, existing bugs in google.maps.Marker will not be addressed. At least 12 months notice will be given before support is discontinued. Please see https://developers.google.com/maps/deprecations for additional details and https://developers.google.com/maps/documentation/javascript/advanced-markers/migration for the migration guide.
main3.js:30 Uncaught (in promise) TypeError: marker1.addEventListener is not a function
at initMap (main3.js:30:11)
at js?key=AIzaSyB18K9EOExTMmUaiOgJiRFaLyrRjjjOzlY&callback=initMap:281:275
at js?key=AIzaSyB18K9EOExTMmUaiOgJiRFaLyrRjjjOzlY&callback=initMap:280:288
補足
[CODEPREPのフロントエンドの定番ライブラリを学ぶ＞GoogleMapで遊ぼう＞
3.マーカーをカスタマイズする＞3-3」
勉強しています。
Windows10,vscodeで編集、実行しています。
表示はGoogle Chromeです。
ここでは最初から動かなかったので、自分なりにかなり変更しているのでおかしなところがあると思います。
そこら辺の指摘をしていただければありがたいです。
よろしくお願いいたします。
回答1件
0
自己解決
main1.js
1var map; 2var marker1; 3var infoWindow1; 4var center = { lat: 35.6982, lng: 139.774256 }; 5var tokyoTower = { lat: 35.658581, lng: 139.745433 }; 6 7function initMap() { 8 var map = new google.maps.Map(document.getElementById("map"), { 9 zoom: 12, 10 center: center, 11 }); 12 13 marker1 = new google.maps.Marker({ 14 position: tokyoTower, 15 map: map, 16 title: "東京タワー", 17 icon: { 18 url: "https://assets.codeprep.jp/books/googlemap/tokyo_tower.png", 19 scaledSize: new google.maps.Size(50, 100), 20 }, 21 }); 22 var infoWindow1 = new google.maps.InfoWindow({ 23 content: `<div> 24 <h3>東京タワー</h3> 25 <p>とても大きい</p> 26 </div>`, 27 }); 28 29 marker1.addListener("click", function () { 30 infoWindow1.open(map, marker1); 31 }); 32} 33
index1.html
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8" /> 5 <title>情報ウィンドウを表示する(2)</title> 6 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 7 <link rel="stylesheet" href="./css/main.css" /> 8 <script 9 async 10 defer 11 src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB18K9EOExTMmUaiOgJiRFaLyrRjjjOzlY&callback=initMap" 12 type="text/javascript" 13 ></script> 14 <script src="./js/main1.js"></script> 15</head> 16<body> 17 <div class="form row"> 18 <div class="col-md-1 col-sm-2"> 19 <select id="cities class=form-control"> 20 <option value="東京">東京</option> 21 <option value="大阪">大阪</option> 22 <option value="名古屋">名古屋</option> 23 <option value="札幌">札幌</option> 24 <option value="福岡">福岡</option> 25 <option value="高松">高松</option> 26 <option value="那覇">那覇</option> 27 </select> 28 </div> 29 </div> 30 <div class="map"> 31 <div id="map">ここにMapを表示</div> 32 </div> 33 <div class="events"> 34 <h3>メッセージ</h3> 35 <div id="messages"></div> 36 </div> 37</body> 38</html> 39
main.css
1.map { 2 margin-left: 40px; 3 display: inline-block; 4 padding: 10px; 5} 6 7#map { 8 width: 640px; 9 height: 400px; 10 background-color: gray; 11} 12 13.form { 14 margin-left: 20px; 15 padding-top: 10px; 16} 17 18.messages { 19 width: 100px; 20 margin: 20px; 21} 22
と修正して解決しました。
投稿2025/08/11 14:45
総合スコア33
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。