ずっとお世話になっていた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&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のところを次のようにすると変えることができます。
表示については、Google Map API V3 日本語ドキュメントを参考にしました。
いろいろやってみてください。