【2023年最新版】【Google Maps API】マップクリック地点の緯度経度取得とマーキング

カテゴリー【Google、JavaScript】

【Google Maps API】マップクリック地点の緯度経度取得とマーキング

POSTED BY
2023-05-03

表題のとおり、HTMLにGoogle Mapを読み込んで、クリックでその地点の緯度経度を取得しフォームに入力し、かつクリック地点を中心に地図を移動しマーカーを立てるサンプル。

緯度：　経度：

以下のようなソースになります。

HTML

gmap_get_point.html

GitHub Source

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Google Maps Point Marker</title>

<style type="text/css">
#map {
  height: 600px;
  width: 80%;
}
</style>

<!-- Google Maps API -->
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
var marker = null;
var lat = 35.729493379635535;
var lng = 139.71086479574538;

function init() {
  //初期化
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 18, center: {lat: lat, lng: lng}
  });

  document.getElementById('lat').value = lat;
  document.getElementById('lng').value = lng;

  //初期マーカー
  marker = new google.maps.Marker({
    map: map, position: new google.maps.LatLng(lat, lng),
  });

  //クリックイベント
  map.addListener('click', function(e) {
    clickMap(e.latLng, map);
  });
}

function clickMap(geo, map) {
  lat = geo.lat();
  lng = geo.lng();

  //小数点以下6桁に丸める場合
  //lat = Math.floor(lat * 1000000) / 1000000);
  //lng = Math.floor(lng * 1000000) / 1000000);

  document.getElementById('lat').value = lat;
  document.getElementById('lng').value = lng;

  //中心にスクロール
  map.panTo(geo);

  //マーカーの更新
  marker.setMap(null);
  marker = null;
  marker = new google.maps.Marker({
    map: map, position: geo 
  });
  
}
</script>

<body onload="javascript:init();">

<p>Google Maps Point Marker</p>

<div id="map" style="margin-top: 10px; margin-bottom:15px;"></div>

緯度：<input type="text" id="lat" name="lat" value="" size="20">　経度：<input type="text" id="lng" name="lng" value="" size="20">

</body>
</html>

【次の記事】PostgreSQLで位置情報型GEOGRAPHY,GEOMETRYを使う

【前の記事】【Redisメモ・６】GEORADIUS_RO関数をNode.jsから呼ぶ

Android 　iPhone/iPad 　Flutter 　MacOS 　Windows 　Debian 　Ubuntu 　CentOS 　FreeBSD 　RaspberryPI 　HTML/CSS 　C/C++ 　PHP 　Java 　JavaScript 　Node.js 　Swift 　Python 　MatLab 　Amazon/AWS 　CORESERVER 　Google 　仮想通貨　 LINE 　OpenAI/ChatGPT 　IBM Watson 　Microsoft Azure 　Xcode 　VMware 　MySQL 　PostgreSQL 　Redis 　Groonga 　Git/GitHub 　Apache 　nginx 　Postfix 　SendGrid 　Hackintosh 　Hardware 　Fate/Grand Order 　ウマ娘　将棋　ドラレコ

【WEBMASTER/管理人】

自営業プログラマーです。お仕事ください！
ご連絡は以下アドレスまでお願いします★

【キーワード検索】

【最近の記事】【全部の記事】

Intel Macbook2020にBootCampで入れたWindows11 Pro 23H2のBluetoothを復活させる
Windowsのデスクトップ画面をそのまま配信するための下準備
WindowsでGPUの状態を確認するには(ASUS系監視ソフトの自動起動を停止する)
CORESERVER v1プランからさくらインターネットスタンダートプランへ引っ越しメモ
さくらインターネットでPython MecabをCGIから使う
さくらインターネットのPHPでAnalytics-G4 APIを使う
インクルードパスの調べ方
【Git】特定ファイルを除外する.gitignore
【Ubuntu/Debian】NVIDIA関係のドライバを自動アップデートさせない
【Python】Spacyを使用して文章から出発地と目的地を抜き出す

【カテゴリーリンク】