スポンサードリンク

Google Street View（ストリートビュー）のConnecting MapにMarkerを表示させるサンプルデモ（Demo）

Posted by 管理人 on 2011年10月9日 Leave a comment (2) Go to comments

コメントを頂いたので、StreetViewのコネクティングマップにマーカーを表示させてみます。

MySQLではソースが判りにくいかと・・・・・この記事で作成していた地図と このデモサンプル（マップコネクト）を掛け合わせて少し調整して完成。

 

◆マップコネクトデモのオリジナルソース

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" /> 
<title>ストリートビュー（streetView）＋マップを組み合わせたマップコネクトサンプル／Google Maps API V3</title> 
<meta name="keywords" content="Google Maps API V3,ストリートビュー,streetView" /> 
<meta name="description" content="ストリートビュー（streetView）＋マップを組み合わせたマップコネクトサンプル／Google Maps API V3" /> 
<!--css-->
<link rel="stylesheet" href="layout-5-master.css" type="text/css" /> 
<link rel="stylesheet" href="streetview.css" type="text/css" /> 
<!--ここからGoogle Maps API v3-->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 13.0.0.0 for Windows" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript">
function initialize() 
{
	var center = new google.maps.LatLng(35.70960950,139.81388658);
    	var mapOptions = 
	{
      	center: center,
      	zoom: 16,
      	mapTypeId: google.maps.MapTypeId.ROADMAP
    	};
	var map = new google.maps.Map(document.getElementById("map_connect"), mapOptions);

	var panoramaOptions = 
	{
	position:center,
		pov: 
		{
		heading: 278.3,
		pitch:0,
		zoom:0
		}
	};
	var panorama = new  google.maps.StreetViewPanorama(document.getElementById("panowide"),panoramaOptions);
	map.setStreetView(panorama);
}
window.onload = initialize;
</script>
</head>
<body >
<div id="pano_box">
<div id="map_connect" ></div>
<div id="panowide"></div>
</div>
</body>
</html>

 

 

上記<script>に手を加えます。朱書き部。なお、<body>タグ内に変更はありません。

<script type="text/javascript">
var marker;
var defmarker;
var markers = [];
var infoWindow = new google.maps.InfoWindow();

//青い道路（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: 17,
      	mapTypeId: google.maps.MapTypeId.ROADMAP
    	};
	var map = new google.maps.Map(document.getElementById("map_connect"), mapOptions);

　　　　　//マーカーアレイ
 var markers = [
 ['<p>八景島Sea Paradise<br><a href="http://www.seaparadise.co.jp/pleasureland/carnival_house.php" target="_blank">カーニバルハウス</a></p>',35.33804, 139.64527,'atraction'],
 ['<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/pleasureland/sp_tower.php" target="_blank">シーパラダイスタワー</a></p>',35.33563, 139.64460,'atraction'],
 ['<p>八景島Sea Paradise<br><a href="http://www.seaparadise.co.jp/pleasureland/surf_coaster.php" target="_blank">サーフコースター</a></p>',35.33467, 139.64342,'atraction'],
 ['<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.33746, 139.64734,'suizokukan'],
 ['<p>八景島Sea Paradise<br><a href="http://www.seaparadise.co.jp/aquaresorts/area_dolphin.php" target="_blank">ドルフィンファンタジー</a></p>', 35.33699, 139.64647,'suizokukan'],
 ['<p>八景島Sea Paradise<br><a href="http://www.seaparadise.co.jp/aquaresorts/area_lagoon.php" target="_blank">ふれあいラグーン</a></p>',35.33454, 139.64673,'suizokukan'],
 ['<p>八景島Sea Paradise<br><a href="http://www.seaparadise.co.jp/hotel/" target="_blank">Hotelシーパラダイス・イン</a></p>',35.33411, 139.64679,'hotel']
 ];
　　　　　//マーカー呼び出し
 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 html = '<div style="height: 100px; width: 200px"><b>'+name+'</b>' ;

　　　　　//下記の”マーカー表示用”の function createmarker(・・・・・・)を実行
 createMarker(latlng,html,map,category,name)
 }

	var panoramaOptions = 
	{
	position:center,
		pov: 
		{
		heading: 180,
		pitch:0,
		zoom:0
		}
	};
	var 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)
{

 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 atractionUrl = "http://maps.google.co.jp/mapfiles/ms/icons/rangerstation.png";
 var atractionShadowUrl = "http://maps.google.co.jp/mapfiles/ms/icons/rangerstation.shadow.png";
 var atractionIcon = new google.maps.MarkerImage(atractionUrl, iconSize, iconPosition, iconOffset);
 var atractionShadow = new google.maps.MarkerImage(atractionShadowUrl, iconShadowSize, iconPosition, iconOffset);

 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 hotelUrl = "http://maps.google.co.jp/mapfiles/ms/icons/lodging.png";
 var hotelShadowUrl = "http://maps.google.co.jp/mapfiles/ms/icons/lodging.shadow.png";
 var hotelIcon = new google.maps.MarkerImage(hotelUrl, iconSize, iconPosition, iconOffset);
 var hotelShadow = new google.maps.MarkerImage(hotelShadowUrl, 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 =
 {
 atraction: {icon:atractionIcon,shadow:atractionShadow},
 shop: {icon:shopIcon,shadow:shopShadow}, 
 restaurant: {icon:restaurantIcon,shadow:restaurantShadow}, 
 suizokukan: {icon:suizokukanIcon,shadow:suizokukanShadow},
 hotel: {icon:hotelIcon,shadow:hotelShadow}
 };

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

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

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

window.onload = initialize;
</script>

 

 ◆上記コピペ用

<script type="text/javascript">
var marker;
var defmarker;
var markers = [];
var infoWindow = new google.maps.InfoWindow();

//青い道路（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: 17,
      	mapTypeId: google.maps.MapTypeId.ROADMAP
    	};
	var map = new google.maps.Map(document.getElementById("map_connect"), mapOptions);

	var markers = [
	['<p>八景島Sea Paradise<br><a href="http://www.seaparadise.co.jp/pleasureland/carnival_house.php" target="_blank">カーニバルハウス</a></p>',35.33804, 139.64527,'atraction'],
	['<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/pleasureland/sp_tower.php" target="_blank">シーパラダイスタワー</a></p>',35.33563, 139.64460,'atraction'],
	['<p>八景島Sea Paradise<br><a href="http://www.seaparadise.co.jp/pleasureland/surf_coaster.php" target="_blank">サーフコースター</a></p>',35.33467, 139.64342,'atraction'],
	['<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.33746, 139.64734,'suizokukan'],
	['<p>八景島Sea Paradise<br><a href="http://www.seaparadise.co.jp/aquaresorts/area_dolphin.php" target="_blank">ドルフィンファンタジー</a></p>', 35.33699, 139.64647,'suizokukan'],
	['<p>八景島Sea Paradise<br><a href="http://www.seaparadise.co.jp/aquaresorts/area_lagoon.php" target="_blank">ふれあいラグーン</a></p>',35.33454, 139.64673,'suizokukan'],
	['<p>八景島Sea Paradise<br><a href="http://www.seaparadise.co.jp/hotel/" target="_blank">Hotelシーパラダイス・イン</a></p>',35.33411, 139.64679,'hotel']
	];

	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 html = '<div style="height: 100px; width: 200px"><b>'+name+'</b>'  ;

	createMarker(latlng,html,map,category,name)
	}

	var panoramaOptions = 
	{
	position:center,
		pov: 
		{
		heading: 180,
		pitch:0,
		zoom:0
		}
	};
	var 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)
{

	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 atractionUrl = "http://maps.google.co.jp/mapfiles/ms/icons/rangerstation.png";
	var atractionShadowUrl = "http://maps.google.co.jp/mapfiles/ms/icons/rangerstation.shadow.png";
	var atractionIcon = new google.maps.MarkerImage(atractionUrl, iconSize, iconPosition, iconOffset);
	var atractionShadow = new google.maps.MarkerImage(atractionShadowUrl, iconShadowSize, iconPosition, iconOffset);

	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 hotelUrl = "http://maps.google.co.jp/mapfiles/ms/icons/lodging.png";
	var hotelShadowUrl = "http://maps.google.co.jp/mapfiles/ms/icons/lodging.shadow.png";
	var hotelIcon = new google.maps.MarkerImage(hotelUrl, iconSize, iconPosition, iconOffset);
	var hotelShadow = new google.maps.MarkerImage(hotelShadowUrl, 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 =
	{
	atraction: {icon:atractionIcon,shadow:atractionShadow},
	shop: {icon:shopIcon,shadow:shopShadow},   
	restaurant: {icon:restaurantIcon,shadow:restaurantShadow},      
	suizokukan: {icon:suizokukanIcon,shadow:suizokukanShadow},
	hotel: {icon:hotelIcon,shadow:hotelShadow}
	};

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

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

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


window.onload = initialize;
</script>

 

◆出来上がったサンプル

ストリートビューのコネクトマップにマーカー（アイコン）を表示させる

なお、MySQL+phpを使われているのであれば、以前に書いたこの記事の中段で動作しているマップコネクトの地図（Cours Mirabeau　Aix-en-Provence」Street View）が参考になれば幸いです。（scriptはコチラ）

 

◆応用サンプル（ストリートビューの中にアイコンを表示）

　　　偶然にも上記を作成中にストリートビューの中にマーカー（アイコン）が表示されたので、おやっ？。調べてみたら、出来る見たいです。このサイト（Google Maps Mania）を参考にいじって完成。こんなことも出来るんだと思わぬ発見。

 

 

Street Viewと地図を切り替えて表示する／ストリートビューの中にインフォウィンドウを表示させるデモ

 

◆Google Maps JavaScript API V3

関連記事一覧

スポンサードリンク

関連記事一覧

  1. マーカー（アイコン）の種類、画像、サイズ、位置、影を変更する／Google Maps API V3 （new google.maps.Marker / new google.maps.MarkerImage)
  2. マップオブジェクトの状態変化イベント及びマウスイベントを試す。デモのサンプル地図／Map Events Demo
  3. カーナビのようにposition_changedイベントでペグマンを常に地図の中心座標に配置する／ストリートビュー（streetView）
  4. ストリートビュー（streetview）だけを表示する
  5. ストリートビュー地図（マップコネクト）の外にペグマンの表示位置を切り替えるボタンを設置する
Related Posts
Google Maps API v3, Google Maps API v3 アイコン＆マーカー, Google Maps API v3 サンプル, ストリートビュー（streetView）, , , , ,
  1. 豪力 2011年10月10日 8:31 AM

    おぉすごい！これほどご丁寧に対応していただけるとは！神対応に感謝いたしますっ！
    javascript、php、データベースをいとも簡単に操れるといいですね、羨ましいです。
    私はhtmlとcssまではすんなりいけたのですが、プログラムになるとどうも勝手が違い幾度も挫折しております。。。
    今から実装チャレンジしてみます！　再拝　

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="">

Trackbacks and Pingbacks: