googlemap API V3を使用して、住所からgoogleマップを配置する方法

  • 投稿日
  • 著者 kngsmym
  • カテゴリー google

それほど難しい作業ではないのですが、やり方をメモ。

目的は、Wordpressで管理しているサイトで店舗ページを記事として登録している際に、住所を入力しただけでGooglemapが配置されるような処理をテンプレート側で行いたいというものです。

今回、住所はカスタムフィールドで管理しています。

js部分は以下のとおり。一部jqueryを併用しています。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;region=JP"></script>
<script>
$(function(){
	var geocoder = new google.maps.Geocoder();;
	var map;
	var address = $('#ad').text();
	function initialize() {
		geocoder.geocode( { 'address': address}, function(results, status) {
			if (status == google.maps.GeocoderStatus.OK) {
				var latlng = new google.maps.LatLng(-34.397, 150.644);
				var myOptions = {
					zoom: 8,
					center: latlng,
					mapTypeId: google.maps.MapTypeId.ROADMAP,
					draggable: false
				}
				map = new google.maps.Map(document.getElementById("gmap"), myOptions);
				map.setCenter(results[0].geometry.location);
				var marker = new google.maps.Marker({
					map: map, 
					position: results[0].geometry.location
				});
			}else {
				alert("Geocode was not successful for the following reason: " + status);
			}
		});
	}
	initialize();
});
</script>

流れとしては以下のとおりです。

6：#adというidを振った要素から住所を取得
8：geocoderを使用して住所から緯度経度情報を取得
9：正常に取得できているか確認
10：初期の緯度経度を設定
　※ここに住所から取得した緯度経度を直接代入してみたところうまく動きませんでした。
11：オプション設定
　※スマフォ版での使用を想定しているため、draggable: false を加えています。
17：マップを設置しています。”gmap”がマップを表示したい部分のIDです。
18：マップの中心を住所から得た緯度経度に変更しています。
19：設定した緯度経度にマーカーを設置しています。
28：実行しています。

初期状態では別の座標を指定して、そのあとにsetCenterを使って中心を調整するというやり方になってます。上でも書きましたが、緯度経度に変換したものを直接代入するような書き方にすると、エラーは出ないのですが正常に地図が描画されずグレーの状態になります。

HTML部分は以下のとおりです。

//住所入力部分（WPテンプレートの記述）
<span id="ad"><?php echo esc_html(get_post_meta($post->ID,'address',true)); ?></span>
↓
//実行結果は以下のようになります。
//<span id="ad">○○県△△町1-2-3</span>


//googleマップを描画する部分
<div id="gmap"></div>

住所は、カスタムフィールドのaddressをテンプレートで呼び出して、#adというIDで囲んでいます。

googleマップ描画部分は、空のdivタグに任意のIDを付加し、css側でマップの大きさを指定しています。

googlemap jQuery