カスタムフィールドでgooglemapを表示させる方法

　ページにgooglemapを表示させます。
個人店や企業サイトのアクセスページによくある項目です。
一度作れば何度も使いまわしができて非常に便利です。

ソースコード：一番楽な方法

• ・個別ページ（single.php）にgooglemapのコードを記述します。
• ・住所の情報は、カスタムフィールドから取得します。
• ・カスタムフィールドの名前を仮に「カスタムフィールド名」とします。
• ・カスタムフィールド名のデータは、○○県○○市…などの文字列データです。

<?php if ( post_custom('カスタムフィールド名') ) : ?>
<?php
$addressformap = post_custom('カスタムフィールド名');
$addressformapencode = urlencode(mb_convert_encoding($addressformap,"UTF-8","auto"));
?>
<iframe width="500px" height="500px" frameborder="5" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.jp/maps?q=<?php echo $addressformapencode; ?>&z=18&output=embed">
</iframe>
<?php else : ?>
<p>地図を表示できません。</p>
<?php endif; ?>

解説

カスタムフィールドの有無を値判定

<?php if ( post_custom('住所') ) : ?>

カスタムフィールド「住所」の値が存在するかチェックします。

住所取得

$addressformap = post_custom('住所');

カスタムフィールド「住所」の値を変数に代入します。

iframeタグ

<iframe width="500px" height="500px"・・・

ウィンドウの中に、独立したインラインのフレームを表示するためのタグです。

これを利用してgooglemapを表示します。

src="http://maps.google.co.jp/maps?q=<?php echo $addressformapencode; ?>&z=18&output=embed"

srcにgooglemapのURL＋「住所」を記述します。

else以下の処理

<p>地図を表示できません。</p>

カスタムフィールドが存在しなかった場合の処理を記述します。

カスタムフィールド「住所」が無かった場合、「地図を表示できません。」を表示します。

ソースコード：個別ページからテンプレートを呼び出す方法

　googlemapの吹き出しをもっと詳しく表示したい場合があります。
そんなときは、以下のようにJavaScriptを応用して設定します。

• ・個別ページ（single.php）からグーグルマップのページ（maps-template.php）を呼び出します。
• ・住所の情報は、カスタムフィールドから取得します。
• ・カスタムフィールド名を「住所」とします。

<?php $gmap = get_post_meta($post->ID, '住所', true); if ($gmap) { ?>
<script type=”text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
var g = new google.maps.Geocoder(),
                   map, center ;
g.geocode({
        'address': '<?php echo $gmap; ?>'
}, function(results, status) {
          if (status ==google.maps.GeocoderStatus.OK) {
                   center = results[0].geometry.location;
                   initialize();
          }
});

function initialize() {
         var options = {
                 center: center,
                 zoom: 14,
                 mapTypeId: google.maps.MapTypeId.ROADMAP,
                 scrollwheel: true,
                 panControlOptions: {
                     position: google.maps.ControlPosition.TOP_RIGHT
                 },
                 zoomControlOptions: {
                     position: google.maps.ControlPosition.TOP_RIGHT
                 },
                 mapTypeControlOptions: {
                     position: google.maps.ControlPosition.TOP_CENTER
                 },
         };
         map = new google.maps.Map(document.getElementById('googlemap'), options);
         //マーカー作成
         var marker = new google.maps.Marker({
                  position: map.getCenter(), //マーカーの位置
                  map: map //表示する地図
         });
         //吹き出しを作成します
         var contentString = '<?php echo "<strong>○×商事</strong>
                  <br/>" ; ?>' + '<?php echo post_custom('map_adress'); ?>';
         var infowindow = new google.maps.InfoWindow({
                  content: contentString  // 吹き出し内コメント
         });
 	                     
         //吹き出しをオープンします
         infowindow.open(map,marker);
         
         //クリックしたときに吹き出しがオープンするイベントを定義
         google.maps.event.addListener(marker, 'click', function() {
                  infowindow.open(map,marker);
         });
}
</script>
<?php } ?>
<?php if(post_custom('住所')): ?>
<div id="googlemap"></div>
<?php else: ?>
<div id="no_map_div">地図はありません。</div>
<?php endif; ?>

解説

情報ウィンドウ内に表示するテキスト

var contentString =

地図の情報ウィンドウ（吹き出し）に表示するテキストを指定します。HTML文も記述できます。

吹き出しをオープン

infowindow.open(map,marker);

地図の情報ウィンドウ（吹き出し）をオープンにします。
吹き出しを非表示にしたい場合はinfowindow.close();を記述します。

地図の表示

<div id="googlemap"></div>

「id=”googlemap”」のdivタグで地図を表示します。