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

HTML、CSS、JavaScript、スマートフォンサイト、Facebookなど、サイト制作に関する事をメモしています。
個人的な備忘録です。
及川WEB室 ホームページ制作HOME
及川WEB室 > Google > Google Maps API V3 住所から緯度・経度を取得 - Googleマップの埋め込み方法

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

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

lat(緯度):Lat
lng(経度):Lng
地図をクリックでも座標が取得できます。
参考サイト:
ジオコーディング|Google Maps JavaScript API v3|Ajax|PHP & JavaScript Room
Google Maps JavaScript API V3 - Google Maps API — Google Developers

住所から緯度・経度を取得する、Googleマップの表示の仕方

Google Maps JavaScript API バージョン 3(V3) での、Googleマップの埋め込み方法をご紹介。
テキストエリアに入力した住所から緯度・経度を取得し、
地図上にマーカーと情報ウィンドウを表示させる方法。

jQuery と、Google Maps API を読み込む

下記をhead内に記述する。

<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>

地図を表示する設定のスクリプトのサンプル

下記をhead内に記述する。
もしくは、コードが長くなりすぎるので外部ファイル化して読み込む。
※このサイトではprototype.jsを使っているので、jQuery と、prototype.js のコンフリクト(競合)の対処をした記述をしています。
<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>

地図を表示する(HTML)

body内の、地図を表示したい個所に下記を記述する。
lat(緯度):Lat
lng(経度):Lng
地図をクリックでも座標が取得できます。
地図のサイズは、上記12行目の style 属性で指定しています。

jQuery prototype.js のコンフリクト(競合)について

Google Maps API では jQuery を使用する。
今回、ハマったのは、jQuery と prototype.js のコンフリクト(競合)

本ページでは、下位バージョンのIEで表示したときに「IE6 No More」を表示すようにしており、「IE6 No More」を表示するのに prototype.js を使用している。
その prototype.js が、jQuery とコンフリクト(競合)し、Google Maps がきちんと動作しなかった。

jQuery と prototype.js のコンフリクト(競合)の対処法。

3つの対策をした。 詳細はこちら
MENU Ξ