WordPressのカスタムフィールドから住所の緯度経度を取得してGoogle Mapを表示(Google Map api)

WordPressで住所をカスタムフィールドで入力した際に、ついでにそのカスタムフィールドの情報を引っ張ってきてGoogle Mapを利用する方法。

1.住所から緯度経度を取得

phpテンプレート

これで$map_latlonの値は、カスタムフィールド'map'の値の住所の緯度経度が代入されました。

2.Google Map apiで地図を表示

phpテンプレート

id="map" style="width:100%; height: 500px;の部分でお好みのサイズにカスタマイズしてください。
WordPressのプラグインでカスタムフィールドから地図を表示する方法もありますが、細かい設定をしたい場合はこちらの方法が便利です。
今現在の設定ですとGoogle Mapの拡大縮小を禁止しています。

3.Google Mapのカスタマイズ

マウスホイール scrollwheel
ダブルクリック disableDoubleClickZoom
ドラッグ draggable
航空写真切替 mapTypeControl
移動コントロール panControl
拡大縮小バー zoomControl
スケール scaleControl
ストリートビュー streetViewControl

phpテンプレート

このvar mapOptions = {}の中にカスタマイズ用のプロパティを入れていけば好みのGoogle Mapの埋め込みが実装可能になります。

投稿者:気まぐれWEBLOG管理人