勉強したことのメモ

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

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

      2021/03/11

GoogleMapAPIでクリックした位置にマーカーを設置し、座標の経度緯度をテキストボックスに自動で入力させたかった。また、既に設置されているマーカーは削除、新しく設置したマーカーがマップの中心に来るよう移動させたい。以下に方法をメモ。

 

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=xxxxxxxxxxxxxxxxx"></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('click', clickLatLng);
function clickLatLng(event){

	//クリックした位置の座標を取得
	var click_latlng = event.latLng;

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

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

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

	//マーカー位置に移動
	map.panTo(new google.maps.LatLng(click_latlng.lat(),click_latlng.lng()));
}
</script>

 - Google Maps API, Google

  関連記事

androidでgeolocationを使うとtimeoutになる

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

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

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

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

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

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

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

GoogleMapでマーカーをまとめる

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

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

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

スマホでページ内リンクからGoogleMapアプリを開く

スマホでWebページにあるリンクをクリックした際にGoogleMapアプリを表示 ...

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

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

GoogleMapsAPIでマーカーが全て表示されるように自動ズーム

GoogleMapsAPIでマーカーを複数設置した場合にズームの値や、マーカーの ...

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

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