Q&A
googleマップを埋め込みたいということですか？
javascript初心者です。
覚えたてのGoogle Maps APIを使って、食べログのMAP版のようなものを作成しようとかれこれ10時間ほど画策しております。
一つ目の地図はなんとか調べながら、ようやく作成できたですが、このフォーマットで複数の地図を表示したいのですが、どのような書き方が良いでしょうか。
皆様、お力をお貸しください。
HTML
1<body> 2 <ul> 3 <li>表参道</li> 4 <li>恵比寿</li> 5 <li>新宿</li> 6 <li>六本木</li> 7 <li>西麻布</li> 8 </ul> 9 <div id="map"></div>
javascript
1<script> 2 3var infowindow = new google.maps.InfoWindow(); 4 5function init() { 6 7 var option = { 8 zoom: 15, 9 center: new google.maps.LatLng(中心地の緯度, 経度), 10 mapTypeId: google.maps.MapTypeId.ROADMAP, 11 disableDefaultUI: true 12 }; 13 14 map = new google.maps.Map(document.getElementById("map"), option); 15 google.maps.event.addListener(map, "click", function() {infowindow.close();}); 16 17 var point = new google.maps.LatLng(お店Aの緯度, 経度); 18 var marker = create_maker(point, "info", "<p>お店名</p><img src='お店の写真' id='photo'/>"); 19 20 var point = new google.maps.LatLng(お店Bの緯度, 経度); 21 var marker = create_maker(point, "info", "<p>お店名</p><img src='お店の写真' id='photo'/>"); 22 23 var point = new google.maps.LatLng(お店Cの緯度, 経度); 24 var marker = create_maker(point, "info", "<p>お店名</p><img src='お店の写真' id='photo'/>"); 25 } 26 27function create_maker(latlng, label, html) { 28 29 var marker = new google.maps.Marker({position: latlng, map: map, title: label}); 30 31 google.maps.event.addListener(marker, "mouseover", function() { 32 infowindow.setContent(html); 33 infowindow.open(map, marker); 34 }); 35} 36 37google.maps.event.addDomListener(window, "load", init); 38 39</script>
#mapをおそらく#map2、#map3…と増やしていくのだと思いますが…何度試しても変数と代入の関数がうまくいかず数時間行き詰まっております。
何卒宜しくお願いします！
はい、その通りです！
今、表参道付近の美味しいお店を複数PickUpし、マーカーで表示しているのですが、それを恵比寿・新宿…のように複数のマップを一ページ内におさめたいと思っています。宜しくお願いしますm(_ _ )m
どのように配置したいか教えていただけますか？
ありがとうございます。配置は横並びでも縦並びでも構わないのですが、出来れば横に２つ（１列に２枚の地図が並んだもの）を作りたいと思っていまして、大きさはこちらで設定しています。
#map {
width: 600px;
height: 400px;
}
で設定しています。
ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。
ありがとうございます。具体的なイメージ図を載せてみました。#mapをおそらく#map2、#map3…と増やしていくのだと思いますが…効率的な javascript変数が思いつかず。 どうぞ宜しくおねがいします。
何も試していないなら、ただの作業依頼でしか有りませんし、それはteratailで推奨されていません。
【推奨していない質問｜teratail（テラテイル）】
https://teratail.com/help/avoid-asking
>kei344
今日一日試しまくってるですが、どうしてもバグがでてきて一向に実装できず。悶絶にこらえきれず質問いたしました。…
回答2件
0
こちら解決できました！みなさまありがとうございます。
投稿2019/11/03 13:53
退会済みユーザー
総合スコア0
0
ベストアンサー
こちら解決できました。みなさまありがとうございます。
投稿2019/11/03 13:35
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
