1

私は天気/地図のWebアプリをやっています。ユーザーの緯度と経度に基づいて、天気と場所をマップ (Google マップ) に表示します。Codepen で Google Maps API を使用する場合、Js ウィンドウに配置することはできません。代わりに、<script></script>タグ間の HTML テンプレートに配置する必要があります。

それは問題ありませんが、問題は、場所を検索できるように、JS ウィンドウから緯度と経度の変数を渡す必要があることです。どうすればいいですか？Codepen は少しトリッキーな場合があります。

うまくいけば、私は理にかなっています.Codepenは次のとおりです。

https://codepen.io/tadm123/pen/OWojPx

ありがとう

コードを含める必要があるため、下にスクリプトを配置するだけです。Codepen リンクを参照してください。

<html>
<head>
  <title>Weather App</title>
</head>

<body>
  <div>
   <div class = "container-fluid" id="box">
     <p id="country"></p>
     <p id="name"></p>
     <p id="weather"></p>
     <p id="celsius"></p>
     <p id="fahrenheit"></p>
     <p id="humidity"></p>

     <img src="aa" alt="Weather icon">

  </div>


<h3>You are here!</h3>
    <div id="map"></div>
    </div>


    <script>
      function initMap() {
        var uluru = {lat: -25.363, lng: 131.044};    
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }
    </script>
  <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCB4SQpFr1XLzTuYlQF_KTBixLCUQoRcOY&callback=initMap">
    </script>
</body>

</html>
4

1 に答える 1