スポンサードリンク

サンプルデモマップ/パノラミオ(panoramio)写真をタグで検索するInputフォームを追加する。

地図に表示させるパノラミオ(panoramio)のサムネイルをタグ指定するサンプル

個別ブログ記事に戻る

Google Maps API v3使い方のサンプルデモマップ一覧に戻る

Google Maps API v3の使い方の記事一覧に戻る


<?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" lang="langOpen" xml:lang="langOpen">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" /> 
<title>パノラミオのオーバーレイヤー</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=panoramio"></script> 
<script type="text/javascript"> 

var panophoto;

function initialize() 
{
	var center= new google.maps.LatLng(35.66552, 139.73085);
	var myOptions = 
	{
	zoom: 12,
	center: center,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	};
 
	var map = new google.maps.Map(document.getElementById("map_panoramio"),myOptions);
 
	panophoto = new google.maps.panoramio.PanoramioLayer();
	panophoto.setMap(map);

}
 
function getTaggedPhotos() 
{
	var tagFilter = document.getElementById('tag').value;
	panophoto.setTag(tagFilter);
}

window.onload = initialize;

</script> 
</head> 
<body >
<div> 
  <input id="tag" type="textbox" value="駅"> 
  <input type="button" value="タグ検索" onclick="getTaggedPhotos()"> 
</div> 
 
<div id="map_panoramio" style="width: 740px; height: 400px; "></div> 
</body> 
</html>

スポンサードリンク

Related Posts

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