カテゴリー【Google、JavaScript】
【Google Maps API】マップクリック地点の緯度経度取得とマーキング
POSTED BY
2023-05-03
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>
Android
iPhone/iPad
Flutter
MacOS
Windows
Debian
Ubuntu
CentOS
FreeBSD
RaspberryPI
HTML/CSS
C/C++
PHP
Java
JavaScript
Node.js
Swift
Python
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/管理人】
自営業プログラマーです。お仕事ください!ご連絡は以下アドレスまでお願いします★
☆ServerNote.NETショッピング↓
ShoppingNote / Amazon.co.jp
☆お仲間ブログ↓
一人社長の不動産業務日誌
【キーワード検索】
【最近の記事】【全部の記事】
TSUKUMOのマルチGPUパソコンWA9J-X211/XTにUbuntu Server 22.04とVOICEVOX Engineを導入する【VOICEBOX Engine】403 Forbidden Origin not allowedの対処法
【Python urllib】Proxy URL had no scheme, should start with http:// or https://の対処法
FirebaseでiOSアプリにプッシュ通知機能を実装する【3】
FirebaseでiOSアプリにプッシュ通知機能を実装する【2】
FirebaseでiOSアプリにプッシュ通知機能を実装する【1】
Apple Push Services: この証明書は信頼されていません【対処法】
OpenAI Assistants APIメモ【4】スレッドの一覧表示と削除
OpenAI Assistants APIメモ【3】GPT-3.5およびGPT-4のアシスタントが質問に回答する
OpenAI Assistants APIメモ【2】GPT-3.5およびGPT-4のアシスタントを作成
【人気の記事】【全部の記事】
進研ゼミチャレンジタッチをAndroid端末化する【Windows10】リモートデスクトップ間のコピー&ペーストができなくなった場合の対処法
Windows版Google Driveが使用中と言われアンインストールできない場合
Googleファミリーリンクで子供の端末の現在地がエラーで取得できない場合
【C/C++】小数点以下の切り捨て・切り上げ・四捨五入
Androidホームで左にスワイプすると出てくるニュース共を一切表示させない方法
Windows11+WSL2でUbuntuを使う【2】ブリッジ接続+固定IPの設定
【Apache】サーバーに同時接続可能なクライアント数を調整する
Googleスプレッドシートで図形をコピーして使いまわすには
Pythonで処理にかかった時間を計測するには
【カテゴリーリンク】
Android
iPhone/iPad
Flutter
MacOS
Windows
Debian
Ubuntu
CentOS
FreeBSD
RaspberryPI
HTML/CSS
C/C++
PHP
Java
JavaScript
Node.js
Swift
Python
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
ウマ娘
将棋
ドラレコ