勉強したことのメモ

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

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

   

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

  関連記事

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

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

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

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

GASとLINEを連携させて通知を送る

Google Apps ScriptとLINEを連携させ、LINEに何らかの通知 ...

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

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

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

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

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

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

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

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

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

GoogleMapでマップ自体をドラッグして移動した後、中心地の経度緯度を取得し ...

GASでGoogleカレンダーと連携してイベントの取得・追加・削除

Google Apps Scriptの勉強としてGoogleカレンダーと連携させ ...

GASで特定サイトにログインした後にスクレイピングを行う方法

Google Apps Scriptの勉強として特定サイトにログインし、その後に ...