このエントリーをはてなブックマークに追加

ブログ内にグーグルマップを表示するプラグインはいろいろありますが、
マップだけでなく、YouTube の動画やFlickr の画像を貼り付けたりも出来る(検索機能もあり)
Insights:http://wordpress.org/extend/plugins/insights/ がお勧めです。
地図を貼り付ける場合は住所を入力するだけで(建物名、駅名などでも検索できます)、マーカーを追加することも出来ます。*Iフレームではなく img タグで埋め込みます。
☆グーグルマップの APIkey を取得する必要があります。

2010.9.26追記
ショッピングカートを導入したサイトでGoogle Maps Anywhere がエラーを起こしたので、急遽探したプラグイン
Google Maps made Simple:http://wordpress.org/extend/plugins/wp-gmappity-easy-google-maps/
住所を入力し(日本語でOK)、ショートコード挿入ボタンをクリックするだけなので、簡単です。APIkey要。書き出すタグもきれい。

2010.10.11追記:
ショートコードを管理するプラグインManage ShortCodes住所からGoogleマップに変換するショートコードを使うとショートコードに住所を入れるだけ(APIキーはショートコード内またはwp-config.phpに記入)で地図を表示できる。ショートコードをPost Snippets に登録すれば(住所部分のみをvariable に指定)さらに簡単。

2011.1.15追記:
1つの地図に複数のマーカーを表示でき、マーカーのテキストにリンクを付けることも出来る。投稿・ページ・テンプレートに表示できるので使い道は色々ありそう。
MapPress Easy Google Maps

2011.7.6追記:
住所からGoogleマップに変換するショートコードはAPIキーが不要になった。
カスタムフィールドと組み合わせてショートコードをテーマに埋めれば、投稿時には住所の入力(または経度緯度)のみでよいので、地図をたくさん掲載する場合は便利。

<?php if (get('latitude') &amp;amp;&amp;amp; get('longitude')): ?><?php echo do_shortcode('[addr2gmap lat="' .get('latitude'). '" lng="' .get('longitude'). '" height="300px" width="600px" zoom=15]'); ?><?php elseif (get('address')): ?><?php echo do_shortcode('[addr2gmap addr="' .get('address'). '" height="300px" width="600px" zoom=15]'); ?><?php endif; ?>

上記はMagic Fields を使用し、経度緯度を優先とした場合。

2013.3.22追記
WP Flexible Map:http://wordpress.org/extend/plugins/wp-flexible-map/
ショートコードで地図を挿入。[flexiblemap address=”大阪府大阪市北区梅田” region=”jp” directions=”true” width=”500″ height=”300″]のように。
http://wordpress.org/extend/plugins/wp-flexible-map/installation/参照

2013.9.25追記
Simple Map:http://wordpress.org/plugins/simple-map/
ショートコードで挿入、スマホ対応。
Advanced Custom Fields で入力された住所から地図に変換するには

<?php echo do_shortcode('[map addr="' . get_field('address') . '" height="200px" width="200px" zoom=15 breakpoint="320px"]'); ?>

2014.2.25追記
使いやすいプラグインが見つからない、地図を複数、マーカーを複数付けたい、等の場合
Advanced Custom Fields でHTMLに変換するテキストエリアを設け

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map" class="simplemap" style="width: 400px; height: 300px;"></div>
<script type="text/javascript">
  function attachMessage(marker, msg) {
    google.maps.event.addListener(marker, 'click', function(event) {
      new google.maps.InfoWindow({
        content: msg
      }).open(marker.getMap(), marker);
    });
  }
// 位置情報と表示データの組み合わせ
  var data = new Array();//マーカー位置の緯度経度
  data.push({position: new google.maps.LatLng(緯度, 経度), content: 'マーカー1'});
  data.push({position: new google.maps.LatLng(緯度, 経度), content: 'マーカー2'});
 
  var myMap = new google.maps.Map(document.getElementById('map1'), {
    zoom: 12,//地図縮尺
    center: new google.maps.LatLng(緯度, 経度),//地図の中心点
    scrollwheel: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  for (i = 0; i < data.length; i++) {
    var myMarker = new google.maps.Marker({
      position: data[i].position,
      map: myMap
    });
    attachMessage(myMarker, data[i].content);
  }
</script>

のように地図を表示するタグを入れ、このフィールドをショートコード(acf field=”field_name”)で投稿に挿入
という方法もあり。

2014.9.15追記
地図表示のプラグインは設定ページで地図を作成してから投稿に挿入するよりも投稿時に住所を指定して挿入できる方が使いやすい。また、複数の地図を作成できる方が良い。*無料版では1つしか作成できないものもある。
https://wordpress.org/plugins/wp-google-maps-shortcode/ はこの条件を満たしている。
ショートコードで [wp_gmaps address=”住所” zoom=”15″ marker=”1″ width=”~px” height=”~px”] のように。

2015.5.9追記
WP Flexible Map これもおすすめ。
住所での表示のほか、センター位置・マーカー位置・タイトル・リンク等色々設定できます。

2009.01.08 投稿 2015.05.09 更新

新しい情報を追記している場合はありますが、古い情報の修正はしていません。投稿日・文中の日付を参照してください。

Recent Articles