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


Posted:2014/10/26 9:00:54 AM|Category : WordPress

カスタムフィールドで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タグで地図を表示します。


トラックバック用のURL
プロフィール

名前:イワサキ ユウタ 職業:システムエンジニア、ウェブマスター 誕生:1986年生まれ 出身:静岡県 特技:ウッドベース 略歴 2008年04月 金融機関系I

最近の投稿
人気記事
カテゴリー
広告