googlemapプラグインを使ってみる

ダウンロードして指示通りにプラグインをインストール

テンプレートに

GoogleMap を表示するための Javascript を埋め込みます。</head> の直前あたりに

<mt:Ignore><!–[GoogleMap]–></mt:Ignore>
<mt:IfBlogUseGoogleMap>
<script src=”http://maps.google.co.jp/maps?file=api&v=2&key=<$mt:GoogleMapApiKey$>” type=”text/javascript” charset=”utf-8″></script>
<script type=”text/javascript”>
//<![CDATA[
<mt:SetVarBlock name=”center_lat”><mt:IfNonEmpty tag=”EntryGoogleMapLat”><$mt:EntryGoogleMapLat$><mt:else><$mt:BlogGoogleMapDefaultLat$></mt:IfNonEmpty></mt:SetVarBlock>
<mt:SetVarBlock name=”center_lon”><mt:IfNonEmpty tag=”EntryGoogleMapLon”><$mt:EntryGoogleMapLon$><mt:else><$mt:BlogGoogleMapDefaultLon$></mt:IfNonEmpty></mt:SetVarBlock>
var mapId = “map”;
var streetViewId = “view”;
var map;
var view;

// show map
function mapLoad () {
    if (GBrowserIsCompatible()) {
        map = new GMap2( document.getElementById( mapId ) );
        map.setCenter( new GLatLng( <$mt:var name=”center_lat”$>, <$mt:var name=”center_lon”$> ), <$mt:BlogGoogleMapDefaultLevel$> );
        map.addControl( new GLargeMapControl() );

        // show cross
        var cross = document.createElement( “div” );
        var crossWidth = 23; // cross width(img)
        var crossHeight = 23; // cross height(img)
        var mapWidth = parseInt( map.getContainer().style.width );
        var mapHeight = parseInt( map.getContainer().style.height );
        var x = ( mapWidth – crossWidth ) / 2; // cross center(x)
        var y = ( mapHeight – crossHeight ) / 2; // cross center(y)
        cross.style.position = “absolute”;
        cross.style.top = y+”px”;
        cross.style.left = x+”px”;
        cross.style.backgroundImage = “url( <$mt:staticwebpath$>plugins/GoogleMap/center.gif )”;
        cross.style.width = crossWidth+”px”;
        cross.style.height = crossHeight+”px”;
        cross.style.opacity = 0.5;
        map.getContainer().appendChild(cross);
        viewLoad( <$mt:var name=”center_lat”$>, <$mt:var name=”center_lon”$> );

        // event listener
        GEvent.addListener( map, ‘click’, mapClickEvent );
        GEvent.addListener( map, ‘move’, mapMoveEvent );
    }
}

// show street view
function viewLoad() {
    targetPoint = new GLatLng( <$mt:var name=”center_lat”$>, <$mt:var name=”center_lon”$> );
    panoramaOptions = { latlng:targetPoint };
    view = new GStreetviewPanorama( document.getElementById( streetViewId ), panoramaOptions );

    // event listener
    GEvent.addListener( view, “error”, handlePanoramaError );
    GEvent.addListener( view, “initialized”, handleViewInitialized );
}

// map event
function mapInit( lat, lon ) {
    if ( ! lat ) {
        lat = <$mt:var name=”center_lat”$>;
    }
    if ( ! lon ) {
        lon = <$mt:var name=”center_lon”$>;
    }
    map.setCenter( lat, lon );
}

function mapMoveEvent() {
    var xy = map.getCenter();
    if ( document.getElementById( “lat” ) ) {
        document.getElementById( “lat” ).value = xy.lat();
    }
    if ( document.getElementById( “lon” ) ) {
        document.getElementById( “lon” ).value = xy.lng();
    }
    viewInit( xy.lat(), xy.lng() );
}

function mapClickEvent( overlay, point ){
    map.setCenter( point );
    view.setLocationAndPOV( point );
}

// street view event
function viewInit( lat, lon ) {
    if ( ! lat ) {
        lat = <$mt:var name=”center_lat”$>;
    }
    if ( ! lon ) {
        lon = <$mt:var name=”center_lon”$>;
    }
    targetPoint = new GLatLng( lat, lon );
    view.setLocationAndPOV( targetPoint );
}

function handleViewInitialized( location ) {
    map.setCenter(location.latlng);
}

function handlePanoramaError( errorCode ) {
if ( errorCode == 600 ) {
    document.getElementById( streetViewId ).innerHTML = ‘<p style=”color:red;”>You cannot use street view in this area.</p>’;
    return;
}
if ( errorCode == FLASH_UNAVAILABLE ) {
    document.getElementById( streetViewId ).innerHTML = ‘<p style=”color:red;”>You cannnot use streew view by this browser.</p>’;
    return;
}
}
//]]>
</script>
</mt:IfBlogUseGoogleMap>
<mt:Ignore><!–/[GoogleMap]–></mt:Ignore>

そして、

画面の読み込み時に GoogleMap が表示されるように、body タグに以下の属性を埋め込み

<mt:Ignore><!–/[GoogleMap]–></mt:Ignore>
<mt:IfBlogUseGoogleMap>
<body onload=”javascript:mapLoad();” onUnload=”javascript:GUnload()” id=”<$mt:BlogTemplateSetID$>” class=”<$mt:Var name=”body_class”$> <$mt:Var name=”page_layout”$>”>
<mt:else>
<body id=”<$mt:BlogTemplateSetID$>” class=”<$mt:Var name=”body_class”$> <$mt:Var name=”page_layout”$>”>
</mt:IfBlogUseGoogleMap>
<mt:Ignore><!–[GoogleMap]–></mt:Ignore>

あとは、表示部分です。ブログの詳細の本文に表示させるソースを組み込みます。

<mt:Ignore><!–[GoogleMap]–></mt:Ignore>
<mt:IfBlogUseGoogleMap>
<div id=”map” style=”width: 500px; height: 350px; border: 1px solid #ccc; margin-bottom: 20px;”></div>
<div id=”view” style=”width: 500px; height: 350px; border: 1px solid #ccc; margin-bottom: 20px;”></div>
</mt:IfBlogUseGoogleMap>
<mt:Ignore><!–/[GoogleMap]–></mt:Ignore>

これで記事に座標を入れれば出来上がりです。

地図の座標取得ページ – ++RAIL+　さん