WordPressにGoogle Maps API V3！

WordPressの記事内にGoogle Mapやストリートビュー（streetview）を表示させようとしてスムースに行かなかったのでメモ。 記事内にGoogle Mapやストリートビュー（streetview）を表示させるための方法ですが、ポイントは次の通り。様々なやりかたがあると思いますが参考までに。

◆ <header></header>内にメタタグ等は、プラグインを使い全ての記事で有効になるようにしておく。

WordPressのheader部にGoogle Map用の外部scriptファイルやメタタグ等を指定しておきます。 google Mapを表示させるには最低下記を追加しておきます。スマートフォン向けで見られるようにするためには、sensorはtrueを指定しておきます。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 

あとは必要に応じて追加してください。

下記サンプルではつかっていません。

◆ WordPressの記事内やページのソースの自動整形や＜ｐ＞タグの自動挿入を防ぐためのプラグインを追加します。

次にwordpressの記事中に一部javascriptを記述する場合がありますので、自動整形を無効にできるプラグインを有効にしておきます。記事内にscriptソースをそのまま貼り付けても、＜ｐ＞タグ等が勝手に追加されてしまい、javascriptがエラーになり、地図が動作しません。 このために、wordpressのダッシュボードのプラグインのインストール画面から新規プラグイン検索で、「PS Disable Auto Formatting」と入力して検索、インストール後、有効化して完了させておきます。（※最近はプラグインshortcoderを活用しています。後でHTMLの書き直し時が楽になります。）

または、記事ソースに内に記述するのでなく、記事個別毎やページ毎にjavascriptやスタイルシートを指定できるプラグインを使う手もあります。 使っているのは、「Specific CSS/JS for Posts and Pages」 これもWordpressのプラグインのインストール画面の「プラグインの検索」窓に「Specific CSS/JS for Posts and Pages」といれて検索すれば見つかります。 有効化すれば、各記事の入力画面の下部に下記のような入力部が表示されますので、<script type=”text/javascript”>・・・・・・・・・・</script>のソースをそのままペーストすればOKです。

下記のサンプルでは、外部ファイルと次のソースを貼り付けてあります。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript" src="http://waox.main.jp/maps/common/localsearch-v3/jGoogleBarV3.js"></script> 
<link rel="stylesheet" href="http://waox.main.jp/maps/common/localsearch-v3/default.css" type="text/css" /> 
<script type="text/javascript">
  google.load('search','1');

	//◆カスタムコントロール
function HomeControl(controlDiv, map) 
{
  controlDiv.style.padding = '5px';

  var controlUI = document.createElement('DIV');
  controlUI.style.backgroundColor = 'white';
  controlUI.style.borderStyle = 'solid';
  controlUI.style.borderWidth = '2px';
  controlUI.style.cursor = 'pointer';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Click to set the map to Home';
  controlDiv.appendChild(controlUI);

  var controlText = document.createElement('DIV');
  controlText.style.fontFamily = 'Arial,sans-serif';
  controlText.style.fontSize = '13px';
  controlText.style.paddingLeft = '4px';
  controlText.style.paddingRight = '4px';
  controlText.innerHTML = '<b>ペグマンはココ</b>';
  controlUI.appendChild(controlText);

	google.maps.event.addDomListener(controlUI, 'click', function() 
	{
	map.panTo(positionCell);//◆ペグマン（ストリートビューで見ている道路）の座標へ地図を移動
	});
}

  function initialize() 
{
	var center = new google.maps.LatLng(35.667355, 139.70781999999997);
    	var mapOptions = 
	{
      	center: center,
      	zoom: 16,
      	mapTypeId: google.maps.MapTypeId.ROADMAP
    	};
	var map = new google.maps.Map(document.getElementById("map_connect"), mapOptions);
	var gbar=new window.jeremy.jGoogleBar(map)
	map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(gbar.container);

	var panoramaOptions = 
	{
	position:center,
		pov: 
		{
		heading: 120.5,
		pitch:7.7,
		zoom:1
		}
	};
	panorama = new  google.maps.StreetViewPanorama(document.getElementById("panowide"),panoramaOptions);
	map.setStreetView(panorama);

	//◆カスタムコントロール
	var homeControlDiv = document.createElement('DIV');
	var homeControl = new HomeControl(homeControlDiv, map);
	homeControlDiv.index = 1;
	map.controls[google.maps.ControlPosition.RIGHT_TOP].push(homeControlDiv);

	//◆ペグマン位置変更イベント
	google.maps.event.addListener(panorama, 'position_changed', function() 
	{
	positionCell = panorama.getPosition();
	map.panTo(positionCell);//◆ペグマン（ストリートビューで見ている道路）の座標へ地図を移動
	});

  }
google.setOnLoadCallback(initialize);
</script>

◆HTMLソースは、記事内に記述

地図を表示させる<div id=”map” style=”width : 100%;height : 570px;”>Loding・・・・・・</div>タグを記事内に記述します。 これで地図は表示されるはずです。

下記のサンプルではこうです。なお、このHTMLソースは、Short Codeで埋め込むとタグが勝手に消えたりしないので、その方がお勧め。

<div id="pano_box" style="border-width : 3px;border-style : solid;border-color : silver;">
	<div id="panowide" style="width : 100%;height : 450px;"></div>
	<div id="map_connect" style="width : 100%;height : 250px;"></div>
</div>

◆ php+MySQlで外部のXMLファイルからマーカーを読み込む場合。

なお、MySQLからマーカーデータを読み込んでいる場合、自分のドメイン以外のリンクからは、マーカーを読み込めないようです。

例えば、ホームページビルダー等でマーカーが表示されても、Wordpressの記事上では表示されないことがあります。

このような場合には、XMLファイルを生成するphpファイルのアップロード先をの置き場所を確認してみてください。

本ブログを例にすれば、MySQL データベースの情報を記述するPHPファイル及びXML形式にテーブルデータをGoogle Mapsで読み出すためのPHPファイルは、 http://waox.main.jp/news/ または　http://waox.main.jp/news/wp-admin/ のフォルダ内にあります。

◆ サンプル地図

別の問題：本記事に直接関係はありませんが、ストリートビューを作成していて気がついた問題があったので紹介。 この地図に表示されているペグマンですが、スタイルシート（CSS）の性なのか二人に分割されて変になっています。確認したら、Wordpressのテーマ（外観）により発生する問題のようです。 複数のテーマ（10種類）をインストールして試したところ、約4つのテーマで同じような表示問題が確認できました。 原因を追跡するのが大変なのであきらめました。そのうちテーマをiNoveから変更しようかと・・・・・・。

◆Google Maps JavaScript API V3

• Google Maps API v3 目次に戻る

スポンサードリンク