スポンサードリンク

ストリートビュー地図（マップコネクト）の外にペグマンの表示位置を切り替えるボタンを設置する

Posted by 管理人 on 2012年5月2日 Leave a comment (0) Go to comments

以前の記事「Google Street View（ストリートビュー）のConnecting MapにMarkerを表示させる」で作成したストリートビューのマップコネクトの地図がベースです。

複数の駐車場の入り口を紹介するために、ストリートビューと地図を使ったマップコネクトを使用します。地図の外に複数のボタンを設けて、クリックするとそれぞれの駐車場の入り口を表示させるものです。

1.script

<script type="text/javascript">
var marker;
var defmarker;
var markers = [];
var infoWindow = new google.maps.InfoWindow();
var panorama,map;
var markers = 
	[
	['<p>八景島Sea Paradise<br><a href="http://www.seaparadise.co.jp/baymarket/area_a.php" target="_blank">レストランプラザ</a></p>',35.33545,139.64554,'restaurant','レストランプラザ'],
	['<p>八景島Sea Paradise<br><a href="http://www.seaparadise.co.jp/baymarket/area_c.php" target="_blank">ショッピングモール</a></p>', 35.33688, 139.64577,'shop','ショッピングモール'],
	['<p>八景島Sea Paradise<br><a href="http://www.seaparadise.co.jp/aquaresorts/area_aqua.php" target="_blank">アクアミュージアム</a></p>',35.337411,139.646911,'suizokukan','アクアミュージアム']
	];
//青い道路（ImageMapType）を指定
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 center = new google.maps.LatLng(35.33683, 139.64509);
    	var mapOptions = 
	{
      	center: center,
      	zoom: 16,
      	mapTypeId: google.maps.MapTypeId.ROADMAP
    	};
	map = new google.maps.Map(document.getElementById("map_connect"), mapOptions);

	for (var i = 0; i < markers.length; i++) 
	{
	var marker = markers[i];

	var name = marker[0];
	var latlng = new google.maps.LatLng(marker[1], marker[2]);
	var category =  marker[3];
	var comment =  marker[4];
 	var html = '<div style="height: 100px; width: 200px"><b>'+name+'</b>'  ;
	createMarker(latlng,html,map,category,name,comment)
	}

	var panoramaOptions = 
	{
	position:center,
		pov: 
		{
		heading: 180,
		pitch:0,
		zoom:0
		}
	};
	panorama = new  google.maps.StreetViewPanorama(document.getElementById("panowide"),panoramaOptions);

	//青い道路（ImageMapType）をオーバーレイ
	map.overlayMapTypes.insertAt(0, StreetViewType);

	map.setStreetView(panorama);

	//ペグマン位置変更イベント
	google.maps.event.addListener(panorama, 'position_changed', function() 
	{
	positionPegman = panorama.getPosition();
	map.panTo(positionPegman);
	});
}

function createMarker(latlng,html,map,category,name,comment)
{
	var iconOffset = new google.maps.Point(34, 34); 
	var iconPosition = new google.maps.Point(0, 0);
	var iconSize = new google.maps.Size(34, 34);
	var iconShadowSize = new google.maps.Size(37, 34);

	var shopUrl = "http://maps.google.co.jp/mapfiles/ms/icons/shopping.png";
	var shopShadowUrl = "http://maps.google.co.jp/mapfiles/ms/icons/shopping.shadow.png";
	var shopIcon = new google.maps.MarkerImage(shopUrl, iconSize, iconPosition, iconOffset);
	var shopShadow = new google.maps.MarkerImage(shopShadowUrl, iconShadowSize, iconPosition, iconOffset);

	var suizokukanUrl = "http://maps.google.co.jp/mapfiles/ms/icons/fishing.png";
	var suizokukanShadowUrl = "http://maps.google.co.jp/mapfiles/ms/icons/fishing.shadow.png";
	var suizokukanIcon = new google.maps.MarkerImage(suizokukanUrl, iconSize, iconPosition, iconOffset);
	var suizokukanShadow = new google.maps.MarkerImage(suizokukanShadowUrl, iconShadowSize, iconPosition, iconOffset);

	var restaurantUrl = "http://maps.google.co.jp/mapfiles/ms/icons/restaurant.png";
	var restaurantShadowUrl = "http://maps.google.co.jp/mapfiles/ms/icons/restaurant.shadow.png";
	var restaurantIcon = new google.maps.MarkerImage(restaurantUrl, iconSize, iconPosition, iconOffset);
	var restaurantShadow = new google.maps.MarkerImage(restaurantShadowUrl, iconShadowSize, iconPosition, iconOffset);

	var customIcons =
	{
	shop: {icon:shopIcon,shadow:shopShadow},   
	restaurant: {icon:restaurantIcon,shadow:restaurantShadow},      
	suizokukan: {icon:suizokukanIcon,shadow:suizokukanShadow}
	};

	var icon = customIcons[category] || {};

	var marker = new google.maps.Marker(
	{
	map: map,
	position: latlng,
	icon: icon.icon,
	shadow: icon.shadow,
	title:comment
	});

 	google.maps.event.addListener(marker, 'click', function() 
	{
           	 infoWindow.setContent(html); 
           	 infoWindow.open(map,marker);        	
	});
} 

function stvload()
{
map.setCenter(stvlocation); 
 var panoramaOptions = 
 {
 position: stvlocation,
 pov: 
 {
 heading: head,
 pitch: pit,
 zoom: zoom
 }
 };
 var panorama = new google.maps.StreetViewPanorama(document.getElementById("panowide"), panoramaOptions);
 map.setStreetView(panorama);
} 

function stv1(){stvlocation = new google.maps.LatLng(35.337364, 139.64647200000002);head = 81;pit = 9.3;zoom = 1;map.setZoom(19);stvload()}
function stv2(){stvlocation = new google.maps.LatLng(35.335909, 139.64571899999999);head = -162;pit = 3;zoom = 1;map.setZoom(18);stvload()}
function stv3(){stvlocation = new google.maps.LatLng(35.336771, 139.64619100000004);head = -73;pit = 4.5;zoom = 1;map.setZoom(17);stvload()}

window.onload = initialize;
</script>

 

コピペ用

<script type="text/javascript">
var marker;
var defmarker;
var markers = [];
var infoWindow = new google.maps.InfoWindow();
var panorama,map;
var markers = 
	[
	['<p>八景島Sea Paradise<br><a href="http://www.seaparadise.co.jp/baymarket/area_a.php" target="_blank">レストランプラザ</a></p>',35.33545,139.64554,'restaurant','レストランプラザ'],
	['<p>八景島Sea Paradise<br><a href="http://www.seaparadise.co.jp/baymarket/area_c.php" target="_blank">ショッピングモール</a></p>', 35.33688, 139.64577,'shop','ショッピングモール'],
	['<p>八景島Sea Paradise<br><a href="http://www.seaparadise.co.jp/aquaresorts/area_aqua.php" target="_blank">アクアミュージアム</a></p>',35.337411,139.646911,'suizokukan','アクアミュージアム']
	];
//青い道路（ImageMapType）を指定
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 center = new google.maps.LatLng(35.33683, 139.64509);
    	var mapOptions = 
	{
      	center: center,
      	zoom: 16,
      	mapTypeId: google.maps.MapTypeId.ROADMAP
    	};
	map = new google.maps.Map(document.getElementById("map_connect"), mapOptions);

	for (var i = 0; i < markers.length; i++) 
	{
	var marker = markers[i];

	var name = marker[0];
	var latlng = new google.maps.LatLng(marker[1], marker[2]);
	var category =  marker[3];
	var comment =  marker[4];
 	var html = '<div style="height: 100px; width: 200px"><b>'+name+'</b>'  ;
	createMarker(latlng,html,map,category,name,comment)
	}

	var panoramaOptions = 
	{
	position:center,
		pov: 
		{
		heading: 180,
		pitch:0,
		zoom:0
		}
	};
	panorama = new  google.maps.StreetViewPanorama(document.getElementById("panowide"),panoramaOptions);

	//青い道路（ImageMapType）をオーバーレイ
	map.overlayMapTypes.insertAt(0, StreetViewType);

	map.setStreetView(panorama);

	//ペグマン位置変更イベント
	google.maps.event.addListener(panorama, 'position_changed', function() 
	{
	positionPegman = panorama.getPosition();
	map.panTo(positionPegman);
	});
}

function createMarker(latlng,html,map,category,name,comment)
{
	var iconOffset = new google.maps.Point(34, 34); 
	var iconPosition = new google.maps.Point(0, 0);
	var iconSize = new google.maps.Size(34, 34);
	var iconShadowSize = new google.maps.Size(37, 34);

	var shopUrl = "http://maps.google.co.jp/mapfiles/ms/icons/shopping.png";
	var shopShadowUrl = "http://maps.google.co.jp/mapfiles/ms/icons/shopping.shadow.png";
	var shopIcon = new google.maps.MarkerImage(shopUrl, iconSize, iconPosition, iconOffset);
	var shopShadow = new google.maps.MarkerImage(shopShadowUrl, iconShadowSize, iconPosition, iconOffset);

	var suizokukanUrl = "http://maps.google.co.jp/mapfiles/ms/icons/fishing.png";
	var suizokukanShadowUrl = "http://maps.google.co.jp/mapfiles/ms/icons/fishing.shadow.png";
	var suizokukanIcon = new google.maps.MarkerImage(suizokukanUrl, iconSize, iconPosition, iconOffset);
	var suizokukanShadow = new google.maps.MarkerImage(suizokukanShadowUrl, iconShadowSize, iconPosition, iconOffset);

	var restaurantUrl = "http://maps.google.co.jp/mapfiles/ms/icons/restaurant.png";
	var restaurantShadowUrl = "http://maps.google.co.jp/mapfiles/ms/icons/restaurant.shadow.png";
	var restaurantIcon = new google.maps.MarkerImage(restaurantUrl, iconSize, iconPosition, iconOffset);
	var restaurantShadow = new google.maps.MarkerImage(restaurantShadowUrl, iconShadowSize, iconPosition, iconOffset);

	var customIcons =
	{
	shop: {icon:shopIcon,shadow:shopShadow},   
	restaurant: {icon:restaurantIcon,shadow:restaurantShadow},      
	suizokukan: {icon:suizokukanIcon,shadow:suizokukanShadow}
	};

	var icon = customIcons[category] || {};

	var marker = new google.maps.Marker(
	{
	map: map,
	position: latlng,
	icon: icon.icon,
	shadow: icon.shadow,
	title:comment
	});

 	google.maps.event.addListener(marker, 'click', function() 
	{
           	 infoWindow.setContent(html); 
           	 infoWindow.open(map,marker);        	
	});
} 

function stvload()
{
map.setCenter(stvlocation); 
	var panoramaOptions = 
	{
	position: stvlocation,
		pov: 
		{
		heading: head,
		pitch: pit,
		zoom: zoom
		}
	};
	var panorama = new  google.maps.StreetViewPanorama(document.getElementById("panowide"), panoramaOptions);
	map.setStreetView(panorama);
} 

function stv1(){stvlocation = new google.maps.LatLng(35.337364, 139.64647200000002);head = 81;pit = 9.3;zoom = 1;map.setZoom(19);stvload()}
function stv2(){stvlocation = new google.maps.LatLng(35.335909, 139.64571899999999);head = -162;pit = 3;zoom = 1;map.setZoom(18);stvload()}
function stv3(){stvlocation = new google.maps.LatLng(35.336771, 139.64619100000004);head = -73;pit = 4.5;zoom = 1;map.setZoom(17);stvload()}

window.onload = initialize;
</script>

 

2.<body>内

<button onclick="stv1()">アクアミュージアム</button>
<button onclick="stv2()">レストラン</button>      
<button onclick="stv3()">ショップ</button>

<div id="pano_box" >
<div id="map_connect" ></div>
<div id="panowide"></div>

 

◆ サンプル地図

◆Google Maps JavaScript API V3

関連記事一覧

スポンサードリンク

関連記事一覧

  1. Google Street View（ストリートビュー）のConnecting MapにMarkerを表示させるサンプルデモ（Demo）
  2. マーカー（アイコン）の種類、画像、サイズ、位置、影を変更する／Google Maps API V3 （new google.maps.Marker / new google.maps.MarkerImage)
  3. 外部XMLファイルでなく内部ソースにマーカー用の配列を記述する。
  4. 目的地アイコン（マーカー）をクリックして、ルート検索結果と距離を表示させる方法の続き
  5. php+MySQL／ストリートビューのマップコネクトのソース
Related Posts
Google Maps API v3, Google Maps API v3 サンプル, ストリートビュー（streetView）, , , , , , , ,

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img localsrc="" alt="">