勉強したことのメモ

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

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

      2021/03/11

フォーム内に住所・経度・緯度のテキストボックスを設置し、住所を入力後にボタンを押すと経度緯度が自動で入力された上でGoogleMap上でも該当住所の位置にマーカーを表示させたい。また、経度緯度を入力後にボタンを押すとGoogleMap上でも該当位置にマーカーを設置したい(この場合は住所の自動入力不要)。以下に方法をメモ。

 

HTML部分

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

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

<!-- 経度 -->
<input type="text" name="long" id="long">
<!-- 経度 -->

<a href="javascript:void(0);" onclick="return addressToLatLong()">
	住所から経度緯度取得
</a>
<a href="javascript:void(0);" onclick="return latLongToMap()">
	経度緯度から位置取得
</a>
<div id="map_canvas" style="width: 300px; height: 300px;"></div>

 

javascript部分

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true&key=xxxxxxxxxxxxxx"></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, 
	});
}

//住所から経度緯度取得
function addressToLatLong () { 
	var address = $('#address').val();

	if( !address ){
		alert('住所をご入力ください。');
		return false;
	}

	var geocoder = new google.maps.Geocoder();

	geocoder.geocode({
		address: address
	}, function( results, status ){
		if( status == google.maps.GeocoderStatus.OK ){
			$('#lat').val(results[0].geometry.location.lat());
			$('#long').val(results[0].geometry.location.lng());

			marker.setMap(null);
			mapData = { 'x':results[0].geometry.location.lat(), 'y':results[0].geometry.location.lng() };
			makeMarker(mapData);
			map.panTo(new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()));

			return true;
		} else {
			alert('住所が正常に取得できませんでした。');
			return false;
		}
	});
}

//経度緯度からマップ位置取得
function latLongToMap(){
	var lat = $('#lat').val();
	var long = $('#long').val();

	if( !lat || !long ){
		alert('経度及び緯度をご入力ください。');
		return false;
	}

	marker.setMap(null);
	mapData = { 'x':lat, 'y':long };
	makeMarker(mapData);
	map.panTo(new google.maps.LatLng(lat,long));

}
</script>

 

表示位置の移動

古いマーカーを削除して新しいマーカーを設置するのは過去記事を見てなんとかなったけど、新しいマーカーの表示位置に移動するというのに少し詰まった。

調べたところmap.panToという関数で指定の座標へ移動できた。割と使いどころが多そうな関数なので覚えておきたいところ。

 - Google Maps API, Google

  関連記事

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

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

GoogleMapでマーカーをまとめる

GoogleMapAPIでマーカーを複数表示し、近隣のエリアごとにまとめて表示さ ...

androidでgeolocationを使うとtimeoutになる

Geolocation APIを用いて現在地をGoogleMapに表示させるとい ...

Advanced Custom FieldsでGoogleMapの使用

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

GASの実行時間計測と各種制限について

PHP等でプログラムを組んでいると、あまり実行時間について気にすることはなかった ...

GoogleMapAPIでヒートマップを表示する方法

GoogleMapAPIで花粉状況や雨量を可視化しやすいようなヒートマップ的なも ...

GoogleMapで都道府県の中心地と県庁所在地

GoogleMapで都道府県の中心地もしくは県庁所在地にマーカーを立てたかった。 ...

GASで「カクヨム」の更新状況をスクレイピングで取得する

Google Apps Scriptの勉強として「カクヨム」の指定した小説が更新 ...

GoogleMapで半径●メートルを範囲表示

GoogleMapでマーカーを立てて、そこから範囲●mもしくは●kmを円で表示さ ...

GASで祝日一覧(年月日と祝日名)データをJSON出力するAPIを作成

PHPのシステム案件で祝日を取得し、処理を行う箇所があった。Googleカレンダ ...