HTMLを使用して緯度と経度を指定してGoogleマップ上に場所を表示する方法

Google Mapsの埋め込みAPIを使用する方法: Google Mapsの埋め込みAPIを使用すると、HTMLコードを使って特定の場所を表示することができます。以下は、緯度と経度を指定してGoogleマップ上に場所を表示するための基本的なコード例です。

<!DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        height: 400px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <h3>場所の表示</h3>
    <div id="map"></div>
    <script>
      function initMap() {
        var location = { lat: 35.6895, lng: 139.6917 }; // 緯度と経度を指定
        var map = new google.maps.Map(document.getElementById("map"), {
          zoom: 12, // ズームレベルを指定
          center: location, // 中心地を指定
        });
        var marker = new google.maps.Marker({
          position: location,
          map: map,
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
  </body>
</html>

上記のコードでは、YOUR_API_KEYの部分を自分のGoogle Maps APIキーに置き換える必要があります。また、locationオブジェクトのlatとlngの値を任意の緯度と経度に変更することで、表示する場所を変更できます。

Leafletライブラリを使用する方法: Leafletは、軽量で使いやすい地図表示ライブラリです。以下は、Leafletを使用して緯度と経度を指定して地図上に場所を表示するための例です。

<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.css"
    />
    <style>
      #map {
        height: 400px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <h3>場所の表示</h3>
    <div id="map"></div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.js"></script>
    <script>
      var map = L.map("map").setView([35.6895, 139.6917], 12); // 緯度と経度を指定
      L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
        attribution: "&copy; OpenStreetMap contributors",
      }).addTo(map);
      L.marker([35.6895, 139.6917]).addTo(map);
    </script>
  </body>
</html>

上記のコードでは、setView()関数の引数として緯度と経度を指定することで、表示する場所を変更できます。

これらの方法を使用すると、HTMLを使って緯度と経度を指定してGoogleマップ上に場所を表示することができます。必要に応じて、APIキーの取得や表示する場所の調整を行ってください。