実現したいこと
- htmlに
<div id=map></div>
があったらそこに地図を表示させたい(数はいまのところ3つだが、増えるかもしれないので数指定したくない)
前提
wordpressではなく、静的なhtmlページに表示させたい
概要
既存のプロジェクトで、jQueryを使ってgoogleMapをhtmlに表示させているものがあるのですが、複数の場所の地図を表示させることになりました。
jQueryとJS取り混ぜて以下のように書かれています。
html
1... 2 3<input type="hidden" name="data[latitude]" value="43.xxxxxx" id="latitude"> 4<input type="hidden" name="data[longitude]" value="141.xxxxx" id="longitude"> 5<div class="googleMapArea" id="map"></div> 6 7... 8 9<input type="hidden" name="data[latitude]" value="44.xxxxxx" id="latitude"> 10<input type="hidden" name="data[longitude]" value="142.xxxxx" id="longitude"> 11<div class="googleMapArea" id="map"></div> 12 13... 14 15<input type="hidden" name="data[latitude]" value="43.xxxxxx" id="latitude"> 16<input type="hidden" name="data[longitude]" value="138.xxxxx" id="longitude"> 17<div class="googleMapArea" id="map"></div> 18 19... 20
javascript
1$(function() { 2 3 if (document.getElementById("latitude") != null 4 && document.getElementById("longitude") != null) { 5 var latitude = $('#latitude').val(); 6 var longitude = $('#longitude').val(); 7 if( latitude.length > 0 && longitude.length > 0 ){ 8 var latlng = new google.maps.LatLng( latitude, longitude ); 9 var options = { 10 zoom: 14, 11 center: latlng, 12 mapTypeId: google.maps.MapTypeId.ROADMAP, 13 scrollwheel: false 14 }; 15 var map = new google.maps.Map( $('#map').get(0), options ); 16 var marker = new google.maps.Marker({ 17 position: latlng, 18 map: map 19 }); 20 } 21 } 22 23});
こちらをjQueryのeachループ等を使って複数表示させたいのですが、ループの書き方がわからず、詰まっております。
どなたかお力いただければ幸いです。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。