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

2020/02/22 2020/06/22

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

見出し

1 HTML部分
2 javascript部分
3 ドラッグイベントと中心地の取得

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>

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変数に格納している。

- JavaScript GoogleMap

: 複数のajax処理の結果をまとめて表示

同時にajax処理を行う際、挙動やコードの書き方に悩まされることが多い。例えばA ...

: 画像をドラッグ&ドロップでアップロード

■2015/04/15追記以下記事の方が新しくて詳しい。 http://tai ...

: クロスドメインのiframeで子フレームから親フレームにheightの値を渡す

やりたかった事は、・iframeで子フレームから親フレームにheightの値を ...

: JavaScriptでUNIXタイムスタンプ取得

UNIXタイムスタンプを用いた際、年月日からすぐUNIXタイムスタンプを出した ...

: 日付入力のテキストフォームにカレンダープラグインを導入

やりたかった事と制限は下記の通り。・日付入力のテキストフォームにカレンダープラ ...

: lightboxでCSPエラーが発生

CSP(コンテンツセキュリティポリシー)設定を行っているサーバーでLightbo ...

: jQueryで年月日と時間のピッカー(datetimepicker)

jQueryで年月日と時間を選択できるピッカーを導入したかった。以前にboots ...

: JavaScriptで配列をループ処理(for-in)

JavaScriptでforeach使ったこと無かったけど、配列のキーが連番じ ...

: leaflet.jsとOSMでマーカーの画像をそれぞれ指定する

leaflet.jsとOpenStreetMapでマップ上にマーカーを複数設置し ...

: 異なる文字コード間でform送信する

formの送り手がUTF-8で受け手がEUC-JP、なんとかしてjavascr ...

PREV: GoogleMapAPIで住所・経度緯度入力後にマーカーを移動させる
NEXT: GoogleMapAPIでクリックした座標にマーカーを設置

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

HTML部分

javascript部分

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

関連記事