ダリの雑記：WEBプログラム版

この記事は1年以上前の記事のため、内容が古い可能性があります。

これまでの記事で、「座標の取得方法」「取得した座標からマップを表示する方法」を書いてきました。とはいえ、実際に「GoogleマップAPIで地図とマーカー・バルーンを表示（複数版）」のようなマップページを作る場合、座標をいちいち手動で取得してHTMLに書いていくのは非常にめんどくさい。こういう場合は何かしらのCMSを利用するのが一般的でしょう。

そこで今回はWordPressを使用することにして、エントリーごとに座標を登録する方法を記述します。

カスタムフィールドに座標を登録する方法と言えば、このブログでも取り扱ったことのある、「Google Maps Anywhere」（ダウンロードサイト：「WordPress Plugins/JSeries」）です。

このプラグインを使用すれば、WordPressの管理画面内だけで記事にマップを挿入できます。また、「カスタムフィールドに追加」ボタンを押すことにより、マーカーの座標がカスタムフィールドに追加されます。この座標を利用すれば、「GoogleマップAPIで地図とマーカー・バルーンを表示（複数版）」のようなマップを表示させることが可能となります。

■取得した座標の利用した、WordPressのテーマ記述例
※あくまで例なので、そのままは利用できません。

 <ul id='gmap_list'>
    <?php $myposts = get_posts('category=3&orderby=post_date');
    foreach($myposts as $post) : ?>
        <li>
        <?php endif; ?>
            <div>
                <div class='gmap_title'><a name='gmap_title'><?php echo get_post_meta($post->ID, "shopname", true); ?></a></div>
                <div class='gmap_photo'><img src='<?php echo get_post_meta($post->ID, "shopphoto", true); ?>' width='120' alt='<?php echo get_post_meta($post->ID, "shopname", true); ?>' /></div>
                <div class='gmap_info'>
                    <?php echo get_post_meta($post->ID, "shopaddress", true); ?><br />
                    TEL：<?php echo get_post_meta($post->ID, "shoptel", true); ?><br />
                    営業時間：<?php echo get_post_meta($post->ID, "shopworktime", true); ?><br />
                    定休日：<?php echo get_post_meta($post->ID, "shopholiday", true); ?>
                </div>
                <div class='clear'></div>
                <div class='gmap_description'>
                    <?php echo mb_substr(strip_tags($post->post_content),0,40,"UTF-8"); ?>...[<a href="<?php echo $post->guid; ?>">記事を読む</a>]
                </div>
                <div class='gmap_coord'>
                    <?php echo get_post_meta($post->ID, "Lat_Long", true); ?>
                </div>
            </div>
        </li>
   
    <?php endforeach; ?>
</ul>
<div id='map' style='width:600px;height:500px;'></div>
<div class='clear'></div>

「Lat_Long」：座標が入っているカスタムフィールドです。