« 【MT】MTとjQueryを使って、簡単でかっこいい「Q&A(FAQ)」のページを作る方法 | メイン | fancyboxを使ってHPにアクセスしたときに写真をポップアップさせる方法 »

【MT】 mapperプラグインが表示しなくなったので、対処してみた

ずっとお世話になっていたMTプラグインのMapperですが、googleのAPI v2終了で使えなくなりました。
Mapperプラグインが使えないと、記事に関連した地図表示ができません。
そこで、GoogleMap API v3とjQueryを使った地図表示に切り替えてみました。

参考にしたサイトはこちらhttp://web.mt-systems.jp/archives/361

まずHTMLの<head>~</head>の間に


<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
 google.load("jquery", "1.3.2");
</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;region=JP"></script>
<script type="text/javascript">
$(document).ready(function() {
 $("#abtn").click(function() {
  if (marker != null) {
   marker.setVisible(false);
   delete marker;
  }
  codeAddress($("#aname").val());
 });

 var codeAddress = function(areaname) {
  if (geocoder) {
   geocoder.geocode({'address': areaname}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
     map.setCenter(results[0].geometry.location);
     marker = new google.maps.Marker({
      map: map,
      position: results[0].geometry.location
     });
    } else {
     alert("Geocode was not successfull for the following reason: " + status);
    }
   });
   }
 }

 var myOptions = {
  zoom: 15,
  mapTypeId: google.maps.MapTypeId.ROADMAP
 };
 var marker = null;
 var geocoder = new google.maps.Geocoder();
 var map = new google.maps.Map($("#map_canvas").get(0), myOptions);
 codeAddress("岐阜県中津川市");
});
</script>

次に、<body>~</body>の間の地図表示したい位置に、

<div id="map_canvas" style="width:480px; height:400px;"></div>

とすれば表示されます。

さらにカスタムフィールドを使って、codeAddress("岐阜県中津川市");のところを投稿時に入力できるようにすれば簡単ですね。

また、表示する地図の種類も、MapTypeId.ROADMAPのところを次のようにすると変えることができます。

  • MapTypeId.ROADMAPは通常のマップビューを表示します。
  • MapTypeId.SATELLITEはGoogle Earth の衛星画像を表示します。
  • MapTypeId.HYBRIDは通常と衛星画像の統合された画像を表示します。
  • MapTypeId.TERRAINは、地図的な情報に基づいて、物理的な地図を表示します。
  •  表示については、Google Map API V3 日本語ドキュメントを参考にしました。
    いろいろやってみてください。

    工事・障害情報 (1)
    パソコン (13)
    フレッツ光プレミアム (3)
    ホームページ作成 (8)
    ウイルス・スパム対策 (6)
    EC-CUBE (12)
    Movable Type (11)
    接続 (4)
    機能 (1)
    料金 (1)

    About

    2013年12月24日 17:43に投稿されたエントリーのページです。

    ひとつ前の投稿は「【MT】MTとjQueryを使って、簡単でかっこいい「Q&A(FAQ)」のページを作る方法」です。

    次の投稿は「fancyboxを使ってHPにアクセスしたときに写真をポップアップさせる方法」です。

    他にも多くのエントリーがあります。メインページアーカイブページも見てください。

    Powered by
    Take-net Service