及川WEB室｜ホームページ制作

Google Maps API V3 住所から緯度・経度を取得 - Googleマップの埋め込み方法

テキストエリアに入力した住所から緯度・経度を取得、地図上にマーカーと情報ウィンドウを表示。
また、地図をクリックするとクリックした場所にマーカーと情報ウィンドウが表示され、
情報ウィンドウの中に緯度と経度が表示されます。
下の「◆lat(緯度)：Lat　◆lng(経度)：Lng」の赤い文字の箇所にも表示されます。

<script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&language=ja"></script>

<script type="text/javascript">
// prototype.js とのコンフリクト（競合対策）。
jQuery.noConflict();
//「$」を jQuery として動作させる。(そうしないと「$」はprototypeとして動作してしまう。)
jQuery(document).ready(function($){

		var geocoder, map;
		var marker_ary = new Array();

 		// 地図上に追加されたオーバーレイを格納する配列
		var overlays = [];

		// ページロード時実行
		$(function(){
			initialize();
			$("#btn").bind("click",function(){
				codeAddress();
			}).trigger("click");
		});

		// 地図の初期化
		function codeAddress() {
			// 地図クリックで表示されていたマーカーと情報ウィンドウを削除
			MarkerClear();

			var address = document.getElementById('address').value;
			
			// geocode (住所から緯度経度を取得)
			geocoder.geocode( { 'address': address, 'language': 'ja'}, function(results, status) {
				if(status==google.maps.GeocoderStatus.OK){
					// オーバーレイ消去
					if(overlays.length>0){
						// for(i in overlays){	//この書き方はprototype.js に汚染せれるため次行に書換。
						for(var i=0; i < overlays.length; i++ ){
							overlays[i].setMap(null);
						}
						overlays.length=0;
					}

					// 地図の中心点を変更
					map.setCenter(results[0].geometry.location);

					// 指定された境界に合うように地図を表示
					if(results[0].geometry.bounds)map.fitBounds(results[0].geometry.bounds);
					if(results[0].geometry.viewport)map.fitBounds(results[0].geometry.viewport);

					// マーカー
					var marker = new google.maps.Marker({
						map:map,
						position: results[0].geometry.location
					});

					var latLngArr = results[0].geometry.location.toUrlValue();
					var Arrayltlg = latLngArr.split(",");

					var contentString="";
					contentString+="◆住所："+address+"
";
					contentString+="◆lat(緯度)："+Arrayltlg[0]+"
";
					contentString+="◆lng(経度)："+Arrayltlg[1]+"
";

					// 情報ウィンドウ
					var infowindow = new google.maps.InfoWindow({
					    content: contentString,
					    maxWidth: 250
					});
					infowindow.open(map, marker);
					overlays=[marker, infowindow]

					// lat(緯度)・lng(経度)を表示（IDがgoogle_map_latとgoogle_map_lngの箇所に）
					document.getElementById("google_map_lat").innerHTML = Arrayltlg[0];
					document.getElementById("google_map_lng").innerHTML = Arrayltlg[1];

				}else{
					alert("ジオコードの取得に失敗しました\n"+status);
				}
			});
			return false;
		}

		function initialize(){
			// テキストエリア（ページロード時はHTML内のソースのvalueの値。mapクリックでvalueの値がなくなる（mylistener(event)内）。）
			document.getElementById("address").value = "東京タワー";

			// ジオコードオブジェクト
			geocoder = new google.maps.Geocoder();
			// 緯度・経度：日本
			var myLatlng=new google.maps.LatLng(36.204824,138.252924);
			// 地図のオプション設定
			var myOptions={
				// 初期のズーム レベル
				zoom: 2,
				// 地図の中心点
				center: myLatlng,
				// 地図タイプ
    			mapTypeId: google.maps.MapTypeId.ROADMAP
			};
			// 地図オブジェクト
			map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);

			// 地図上クリックで mylistenerへ
			google.maps.event.addListener(map, 'click', mylistener);
		}

// mylistener 地図上クリック挙動
    function mylistener(event) {
	MarkerClear();
	document.getElementById("address").value = "";

	// lat(緯度)・lng(経度)を表示（IDがgoogle_map_latとgoogle_map_lngの箇所に）
	document.getElementById("google_map_lat").innerHTML = event.latLng.lat();
	document.getElementById("google_map_lng").innerHTML = event.latLng.lng();

	// codeAddress_onclick へ値を渡す
	codeAddress_onclick(event.latLng.toUrlValue());
    }


// codeAddress_onclick 地図上クリック挙動
function codeAddress_onclick(clatlng) {
		var clatlngarr = clatlng.split(",");
		var clat = clatlngarr[0];
		var clng = clatlngarr[1];

		// オーバーレイ消去
		if(overlays.length>0){
		// for(i in overlays){	//この書き方はprototype.js に汚染せれるため次行に書換。
		for(var i=0; i < overlays.length; i++ ){
			overlays[i].setMap(null);
		}
			overlays.length=0;
		}
		// 地図の中心点を変更（クリックした場所をセンターにすると不便なので不採用）
		// map.setCenter(new google.maps.LatLng(clat,clng));

		// マーカー
		var Markerlatlng;
		var marker_num = marker_ary.length;
		marker_ary[marker_num] = new google.maps.Marker({
			map: map,
			position: new google.maps.LatLng(clat,clng)
		});
		var ccontentString="";
		ccontentString+="◆lat(緯度)："+clat+"
";
		ccontentString+="◆lng(経度)："+clng+"
";
		
		// 情報ウィンドウ
		var infowindow = new google.maps.InfoWindow({
		    content: ccontentString,
		    maxWidth: 250
		});
	//	infowindow.open(map, marker);
		infowindow.open(map, marker_ary[marker_num]);
		coverlays=[marker, infowindow]
	} // end of codeAddress_onclick


    function MarkerClear() {
        //マーカー削除
        for (i = 0; i <  marker_ary.length; i++) {
            marker_ary[i].setMap(null);
        }

        //配列削除
        for (i = 0; i <=  marker_ary.length; i++) {
            marker_ary.shift();
        }

        //IDがgoogle_map_lat、google_map_lng の箇所の文字、IDがaddressの内容を空に
	document.getElementById("google_map_lat").innerHTML = "";
	document.getElementById("google_map_lng").innerHTML = "";

    }

});	// prototype.js とのコンフリクト（競合対策）終了。
</script>

	

		
		
	
      ◆lat(緯度)：Lat

      ◆lng(経度)：Lng

地図をクリックでも座標が取得できます。