勉強したことのメモ

webプログラマが勉強したことのメモ。

GoogleMapAPIでマップ自体を移動し中心地の経度緯度を取得

      2021/03/11

GoogleMapでマップ自体をドラッグして移動した後、中心地の経度緯度を取得しテキストボックスに自動で入力させたかった。以下に方法をメモ。

 

HTML部分

<!-- 住所 -->
<input type="text" name="address" id="address">
<!-- 住所 -->

<!-- 緯度 -->
<input type="text" name="lat" id="lat">
<!-- 緯度 -->

<!-- 経度 -->
<input type="text" name="long" id="long" class="form-control form-control-sm">
<!-- 経度 -->

<!-- GoogleMap -->
<div id="map_canvas" style="width: 100%; height: 300px;"></div>
<!-- GoogleMap -->

 

javascript部分

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true&key=xxxxxxxxxx"></script>
<script>
var map;
var marker;

//GoogleMap初期表示
var init_latlng = {'lat' : '35.681236', 'long' : '139.767125'};
var latlng = new google.maps.LatLng(init_latlng.lat, init_latlng.long);
var myOptions = {
	zoom: 12, 
	gestureHandling: "greedy" ,
	center: latlng, 
	mapTypeId: google.maps.MapTypeId.ROADMAP, 
	"streetViewControl": false, 
	"fullscreenControl": false, 
	"styles": false, 
	"disableDoubleClickZoom": false, 
	"mapTypeControl": false, 
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var mapData = { 'x':init_latlng.lat, 'y':init_latlng.long };

//マーカー設置
makeMarker(mapData);

//マーカー作成用関数
function makeMarker( mapData ){
	marker = new google.maps.Marker({
		position : new google.maps.LatLng(mapData.x,mapData.y), 
		map: map, 
	});
}

//マップ移動で経度緯度取得
map.addListener('drag', dragLatLng);
function dragLatLng(){

	//マップの中心座標を取得
	var center_latlng = map.getCenter();

	//経度緯度をテキストボックスに入力
	$('#lat').val(center_latlng.lat());
	$('#long').val(center_latlng.lng());

	//既存マーカーを消去
	marker.setMap(null);

	//マーカー設置
	mapData = { 'x':center_latlng.lat(), 'y':center_latlng.lng() };
	makeMarker(mapData);
}
</script>

 

ドラッグイベントと中心地の取得

map.addListener('drag', dragLatLng);

上記でドラッグイベントを取得しdragLatLng関数を呼び出している。

var center_latlng = map.getCenter();

getCenter()で経度緯度を取得しcenter_latlng変数に格納している。

 - Google Maps API, Google

  関連記事

GASとChatworkを連携してメッセージを送信する方法

Google Apps Scriptの勉強として「Chatwork」と連携させて ...

GoogleスプレッドシートとPHPの連携

GoogleスプレッドシートとPHPプログラムを連携させたいという案件をたまに見 ...

GoogleMapAPIでクリックした座標にマーカーを設置

GoogleMapAPIでクリックした位置にマーカーを設置し、座標の経度緯度をテ ...

GoogleMapでメインカラーを変更する方法

GoogleMapAPIを用いたMAPでカラー変更をしたかった。カラーコードの指 ...

GoogleMapAPIで住所・経度緯度入力後にマーカーを移動させる

フォーム内に住所・経度・緯度のテキストボックスを設置し、住所を入力後にボタンを押 ...

GASで特定サイトをスクレイピングし、画像をGoogleドライブに保存

Google Apps Scriptで特定のサイトにスクレイピングし、画像が掲載 ...

Google map APIでマーカー(アイコン)を好きな画像に変える

Googleマップでユーザーにマーカー画像をアップロードさせて、それをマップ表示 ...

PHPで位置情報を取得してGoogleMapAPIで使用する方法

GPSみたいな位置情報をPHPで取得し、GoogleMapAPIでその場所を反映 ...

GASを使ってみて感じたメリットとデメリット

Google Apps Scriptを色々勉強した中で感じたメリットとデメリット ...

Advanced Custom FieldsでGoogleMapの使用

Advanced Custom FieldsでGoogleMapを使用したかった ...