いつもお世話になっております。
Google mapのストリートビューを表示するWebアプリを作っているのですが、
mapを表示させた後に再読み込みのボタン(画像)を表示させたいです。
しかし現状ではmapの上にボタンを表示させることができません。
良い解決法がわからなかったので質問させていただきます。
html
1<!DOCTYPE html> 2<html> 3 4<head> 5 <meta charset="utf-8"> 6 <title>Street View</title> 7 <link rel="stylesheet" href="css/style.css"> 8 <script type="text/javascript" src="js/map.js"></script> 9</head> 10 11<body> 12 <div id="street-view"></div> 13 <script defer src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxx&callback=initialize"></script> 14 <div id="reload"></div> 15 <script defer> 16 document.getElementById("reload").innerHTML = "<input type='image' src='img/reload.png' alt='reload_button' class='reload_button' onClick='location.reload();' />"; 17 </script> 18</body> 19 20</html> 21``` 22 23```css 24html, 25body { 26 height: 100%; 27 margin: 0; 28 padding: 0; 29} 30body { 31 position: relative; 32} 33/*street_viewの描画エリア*/ 34#street-view { 35 height: 100%; 36} 37/*更新ボタン*/ 38.reload_button { 39 position: absolute; 40 bottom: 20px; 41 width: 40px; 42 height: 40px; 43} 44``` 45 46初歩的な質問で申し訳ないですが、ご教授いただければと思います。 47どうぞよろしくお願い致します。
あなたの回答
tips
プレビュー