WordPressにGoogle Maps API V3！

◆Google Maps V3　ストリートビューの青い道路をImageMapTypeを使い地図に表示させる

v2では、streetviewのオーバーレイヤーを指定すれば、ストリートビューの対応している道路が青くハイライトされたのですが、Ｇｏｏｇｌｅ　Ｍａｐｓ　ＡＰＩ　Ｖ3では、簡単に1行では指定できないようです。

地図上でペグマンを持ち上げると青い道路が表示されますが、それでは不便。常にstreetview対応の青い道路がハイライト表示されるようにしてみます。

google先生のページを調べると「StreetViewTileData オブジェクトの仕様」というのがあります。 ここで、getTileUrl(pano:string, tileZoom:number, tileX:number, tileY:number)のメソッドを使い、 オーバーレイではなく、ImageMapTypeクラスを使い地図上に表示させる方法があるようです。

ただし、getTileUrlでimageのタイルが保存されているURLが判らず探していたら、かのEsaさんのデモにソースがありました（コチラ）。

  getTileUrl: function(coord, zoom) {
    var X = coord.x % (1 << zoom);  
    return "http://mt3.google.com/mapstt?" +　"zoom=" + zoom + "&x=" + X + "&y=" + coord.y + "&client=api";
  },

これを使わせていただき、前回、 Google先生の「Google Maps Javascript API V3 Map Types」のページの「ImageMapType」のデモソースを使って作成した「交通情報をImageMapTypeで表示する」のgetTileUrlのImage保存先URLを置き換えるだけで完成です。次の通り。

<script type="text/javascript">
　//◆個別に指定する初期表示の設定
    var center = new google.maps.LatLng(25.03926, 121.50639);
    var zoom = 12;

    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;

var trafficOptions = 
{
	getTileUrl: function(coord, zoom) 
	{
 　　　　var X = coord.x % (1 << zoom);
　　　　 return "http://cbk0.google.com/cbk?output=overlay&" + 
　　　　 "zoom=" + zoom + "&x=" + X + "&y=" + coord.y + "&cb_client=api";
	},
		tileSize: new google.maps.Size(256, 256),
		isPng: true
	};

	var trafficMapType = new google.maps.ImageMapType(trafficOptions);

function initialize() 
{
	var myOptions = 
	{

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

		//◆ナビゲーションコントロール
		navigationControl: true,
		navigationControlOptions: 
		{
　　　　　　　　//◆通常 ズームコントロール
		style: google.maps.NavigationControlStyle.DEFAULT,
		position: google.maps.ControlPosition.LEFT_TOP
		},
		//◆マップタイプコントロール
		mapTypeControl: true,
		mapTypeControlOptions: 
		{
		style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
		position: google.maps.ControlPosition.TOP_RIGHT
		},
		//◆スケールコントロール
		scaleControl: true,
		scaleControlOptions: 
		{
		position: google.maps.ControlPosition.TOP_CENTER
		},
	center: center,
	zoom: zoom,
	mapTypeId: mapTypeId
	};

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

	map.overlayMapTypes.insertAt(0, trafficMapType);

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

最後イン、trafficという英単語はふさわしくないので、StreetViewに置き換えて出来上がり。

<script type="text/javascript">
　//◆個別に指定する初期表示の設定
    var center = new google.maps.LatLng(25.03926, 121.50639);
    var zoom = 12;

    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;

var StreetViewOptions= 
{
	getTileUrl: function(coord, zoom) 
	{
	var X = coord.x % (1 << zoom);
	return "http://cbk0.google.com/cbk?output=overlay&" + 
	"zoom=" + zoom + "&x=" + X + "&y=" + coord.y + "&cb_client=api";
	},
	tileSize: new google.maps.Size(256, 256),
	isPng: true
};

var StreetViewType = new google.maps.ImageMapType(StreetViewOptions);

function initialize() 
{
	var myOptions = 
	{

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

		//◆ナビゲーションコントロール
		navigationControl: true,
		navigationControlOptions: 
		{
　　　　　　　　//◆通常 ズームコントロール
		style: google.maps.NavigationControlStyle.DEFAULT,
		position: google.maps.ControlPosition.LEFT_TOP
		},
		//◆マップタイプコントロール
		mapTypeControl: true,
		mapTypeControlOptions: 
		{
		style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
		position: google.maps.ControlPosition.TOP_RIGHT
		},
		//◆スケールコントロール
		scaleControl: true,
		scaleControlOptions: 
		{
		position: google.maps.ControlPosition.TOP_CENTER
		},
	center: center,
	zoom: zoom,
	mapTypeId: mapTypeId
	};

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

	map.overlayMapTypes.insertAt(0, StreetViewType);

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

◆Google Maps JavaScript API V3　サンプル

• Street View対応道路をImageMapTypeにより青いハイライトで常に表示させる
  

◆Google Maps JavaScript API V3

• Google Maps API v3 目次に戻る

スポンサードリンク