以前の記事「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
関連記事一覧
スポンサードリンク
Leave a Comment