WordPressにGoogle Maps API V3！

WordPressの記事内にグーグルマップを表示させてみます。

今回の使用したテーマは、Twenty Ten 1.3

WordPress 3.5に更新

テーマTwenty Tenをインストール

Add to Headerを有効化、基本のscriptの下記を記載

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

プラグイン「Specific CSS/JS for Posts and Pages」を使う

各記事編集画面の下部の方にでてくるSpecific CSS/JS for Posts and Pagesの枠内にscriptソースを貼り付けます（ご参考）。

<script type="text/javascript">

//◆個別に指定する初期表示の設定
    var center = new google.maps.LatLng(35.68407, 139.63623);
    var zoom = 10;

    var mapTypeId = google.maps.MapTypeId.ROADMAP 
//通常のデフォルト

//var mapTypeId = google.maps.MapTypeId.SATELLITE //航空写真タイル

//var mapTypeId = google.maps.MapTypeId.HYBRID //航空写真タイルと主要な機能（道路、地名）のタイル レイヤの組み合わせ

//var mapTypeId = google.maps.MapTypeId.TERRAIN //起伏を示すタイル（高度や水系）
</script>
<script type="text/javascript">
//<![CDATA[
var map;

function initialize()
{
    var myOptions =
    {

        disableDefaultUI: false,
//◆API のデフォルトの UI 設定をオフ(無効)にしたい場合は”true”

//◆ナビゲーションコントロール
        navigationControl: true,
        navigationControlOptions:
        {

//◆通常 ズームコントロール
        style: google.maps.NavigationControlStyle.DEFAULT,
        position: google.maps.ControlPosition.LEFT_TOP

//◆Android ズームコントロール

//style:google.maps.NavigationControlStyle.ANDROID,

//position: google.maps.ControlPosition.BOTTOM_CENTER
        },

//◆マップタイプコントロール
        mapTypeControl: true,
        mapTypeControlOptions:
        {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,

//style: google.maps.MapTypeControlStyle.DEFAULT,

//style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.TOP_RIGHT
        },

//◆スケールコントロール
        scaleControl: true,
        scaleControlOptions:
        {

//◆指定無しの場合左下になる

//position: google.maps.ControlPosition.RIGHT_TOP

//position: google.maps.ControlPosition.TOP_CENTER

//position: google.maps.ControlPosition.BOTTOM_CENTER
        },
    center: center,
    zoom: zoom,
    mapTypeId: mapTypeId
    };

　　　　map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
} 

window.onload=initialize;
//]]>
</script>

最後にHTMLソースを記事内に記載する

・・・で完成

<div id="map_canvas" style="width: 100%; height: 300px;"></div>

なお、HTMLソースを記事内に直接記載してもいいのですが、WPの自動整形を避けるために「プラグインshortcoder使い方」を使う案もあります。私は最近これを使ってます。後でHTMLの書き直しにも重宝です。

これで、WordPressの記事内にGppgle Mapが表示されました。

tenapaさん　以上でよかったでしょうか。

スポンサードリンク