前提・実現したいこと
現在、住所から緯度経度を検索し、マーカーを出力する地図の作成を
google map api Google Maps Geocoding API を使用して作成しています。
実際、地図にはマーカーが表示されているのですが、不具合が出たため、ご意見等お伺いしたく存じます。
発生している問題・エラーメッセージ
住所を配列として入れ、forループによってマーカーを作成しているのですが、なぜか、配列の12個目付近で、住所が読み取れなくなってしまう不具合が発生しました。
10個ほどで試験したところ、すべての住所に関してマーカーの作成ができたのですが、12個ほど配列を並べたときに、住所が検索されないログが出ます。
該当のソースコード
javascript
1 <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> 2 <script 3 src="https://maps.googleapis.com/maps/api/js?key=hoge&callback=initMap&libraries=&v=weekly" 4 defer 5 ></script> 6<script> 7 "use strict"; 8 9 function initMap() { 10 11 const myLatLng = { 12 lat: 43.0618, 13 lng: 141.3545 14 }; 15 16 17 const map = new google.maps.Map(document.getElementById("map"), { 18 zoom: 12, 19 center: myLatLng, 20 fullscreenControl: true, 21 zoomControl: true, 22 streetViewControl: false 23 }); 24 25 var address = ['住所1','住所2','住所3','住所4','住所5','住所6','住所7','住所8','住所9','住所10','住所11','住所12','住所13','住所14']; //住所を指定 26 27 28 29 for (let i = 0; i < address.length; i++) { 30 31 32 var geocoder = new google.maps.Geocoder(); 33 34 geocoder.geocode({ address: address[i] }, function(results, status){ 35 if (status === 'OK' && results[0]){ 36 console.log(results[0].geometry.location); 37 new google.maps.Marker({ 38 position: results[0].geometry.location, 39 map, 40 label: ""+(i+1), 41 title: "1" 42 }); 43 44 45 }else{ 46 //住所が存在しない場合の処理 47 alert(address[i]+'住所が正しくないか存在しません。'); 48 target.style.display='none'; 49 } 50 51 }); 52 53 54}; 55 56 } 57 </script> 58 <div id="map" style="width:100%; height:800px"></div>
試したこと
15個などにした場合に、12番目だけマーカー表示されなかったり、不具合が出ています。
10個までは、正常に表示されています。
APIなどの登録は通常通りに行っております。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。