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

カテゴリー【Google、JavaScript】

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

POSTED BY
2024-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/管理人】

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

【キーワード検索】

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

LetsEncrypt/certbotの証明書自動更新がエラーになる場合
Wav2Lipのオープンソース版を改造して外部から呼べるAPI化する
Wav2Lipのオープンソース版で静止画の口元のみを動かして喋らせる
【iOS】アプリアイコン・ロゴ画像の作成・設定方法
オープンソースリップシンクエンジンSadTalkerをAPI化してアプリから呼ぶ【２】
オープンソースリップシンクエンジンSadTalkerをAPI化してアプリから呼ぶ【１】
【Xcode】iPhone is not available because it is unpairedの対処法
【Let's Encrypt】Failed authorization procedure 503の対処法
【Debian】古いバージョンでapt updateしたら404 not foundでエラーになる場合
ファイアウォール内部のWindows11 PCにmacOS Sequoiaからリモートデスクトップする

【カテゴリーリンク】