SteamerLaneStudio

movable-type Google mapの設置 最終更新日: 2023年4月15日

色々あるが・・・

カスタムフィールド（OSはプラグインによる)でLat（緯度）Lng（経度）のフィールドを作成。ここでは仮にMTEntryLat・MTEntryLngとした。

<mt:If tag="EntryLat">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="<MTBlogURL>js/jquery.GoogleMaps.js"></script>
<script type="text/javascript">
$(function(){
$('#gmap<mt:EntryID>').GoogleMaps({
lat: <$MTEntryLat$>,
lng: <$MTEntryLng$>,
zoom: 15
});
})
</script>
</mt:If>

上記をheadタグ内に記載。EntryIDタグを使うのはエントリーアーカイブ以外で複数使用する場合に分けるため。

表示させたいボックス内に

<div class="gmap" id="gmap<mtEntryID>"></div>

を記載。CSSなどでサイズ等を調整。