Googleマップ以外でJavaScriptで地図を操作するには？

ショコラ

Googleマップ以外でJavaScriptで地図を操作するには？

leafletjsというものを使ってみます。
https://leafletjs.com
私がやりたいことは、地図を移動して中心の緯度経度を取得することなのです。

もっさん先輩

こちらの HTML をコピー

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.2/dist/leaflet.css" integrity="sha256-sA+zWATbFveLLNqWO2gtiw3HL/lh1giY/Inf1BJ0z14=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.2/dist/leaflet.js" integrity="sha256-o9N1jGDZrf5tS+Ft4gbIK7mYMipq9lqpVJ91xHSyKhg=" crossorigin=""></script>
<script>
$(function(){

let url = new URL(window.location.href);
let params = url.searchParams;
let p = [params.get('lat'),params.get('lng')];
let zoom = params.get('zoom') || 18;
var map = L.map('map').setView(p,zoom);

L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
  attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>国土地理院</a>"
}).addTo(map);

var marker = L.marker(p).addTo(map)
  .bindPopup('地図を任意の位置に移動させてください')
  .openPopup();

map.on('move',function(e){
  let p = map.getCenter();
  marker.setLatLng(p);
});

map.on('moveend',function(e){
  let p = map.getCenter();
  let zoom = map.getZoom();
  window.parent.postMessage({message:'UpdateLatLng',lng:p.lng,lat:p.lat,zoom:zoom},'*');
});

});
</script>
</head>
<body>

<div id="map" style="position:absolute;top:0;left:0;bottom:0;right:0;"></div>

</body>
</html>

ブラウザで「map.html?lng=139.7649308&lat=35.6812405」にアクセスすると東京駅が表示されます。

file:///C:/Users/mossan/Desktop/map.html?lng=139.7649308&lat=35.6812405

地図を動かすと、中心のマーカーも動き、常に地図の中心を指すようにしています。
これは moveイベントで、マーカーを地図の中心にセットしているからです。

map.on('move',function(e){
  let p = map.getCenter();
  marker.setLatLng(p);
});

次に↓下の部分に注目してください。地図移動後に、緯度経度を親のウィンドウに postMessage で伝えていています。

map.on('moveend',function(e){
  let p = map.getCenter();
  let zoom = map.getZoom();
  window.parent.postMessage({message:'UpdateLatLng',lng:p.lng,lat:p.lat,zoom:zoom},'*');
});

iframe で地図を表示して、地図移動後にイベントで緯度経度を取得します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.0/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.0/dist/semantic.min.js"></script>
<script>
window.addEventListener("message",function(e) {
  if ('UpdateLatLng' == e.data.message) {
    $("#lonlat").val(e.data.lng+' '+e.data.lat);
    $("#zoom").val(e.data.zoom);
  }
});
</script>
</head>
<body>
<div class="ui container">

<div style="max-width:600px;">
  <div style="position:relative;width:100%;height:0;padding-top:66.66%">
    <iframe src="map.html?lng=139.7649308&lat=35.6812405" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0"></iframe>
  </div>

  <div class="ui input fluid">
    <input type="text" placeholder="緯度経度" id="lonlat">
  </div>
  <div class="ui input fluid">
    <input type="text" placeholder="ズーム" id="zoom">
  </div>
</div>

</div>
</body>
</html>