cherenkov/fiddle.html

## fiddle.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type='text/javascript'>
var currentInfoWindow = null;
function mapInit() {
  var myLatlng = new google.maps.LatLng(35.6, 139.7);
  var myOptions = {
    zoom: 10,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

  function mapping(entry) {
	var geo = entry.georss$where.gml$Point.gml$pos.$t.split(/\s/);
	var lat = geo[0];
	var long = geo[1];
	var title = entry.title.$t;
	var videoId = entry.media$group.media$content[0].url.match(/\/v\/([^?]+)/)[1]

    var marker1 = new google.maps.Marker({
      position: new google.maps.LatLng(lat, long),
      map: map,
      title: title,
      icon: new google.maps.MarkerImage('http://maps.google.co.jp/mapfiles/ms/icons/tree.png',
        new google.maps.Size(64, 64),
        new google.maps.Point(0,0),
        new google.maps.Point(0, 32)
      )
    });

    google.maps.event.addListener(marker1, 'click', function() {
      if (currentInfoWindow) {
        currentInfoWindow.close();
      }
      currentInfoWindow = new google.maps.InfoWindow({
        content: '<h3>'+ title +'</h3>' + '<iframe width="560" height="315" src="http://www.youtube.com/embed/' + videoId + '" frameborder="0" allowfullscreen></iframe>'
      });
      currentInfoWindow.open(map, marker1);
    });
  }

  for (var i=0, n=youtube_data.feed.entry.length; i<n; i++) {
    var entry = youtube_data.feed.entry[i];
    if (entry.georss$where) {
	  mapping(entry);
    }
  }
}

var youtube_data;
function init(info) {
  youtube_data = info;
  google.maps.event.addDomListener(window, 'load', mapInit);
}
</script>
<script src="https://gdata.youtube.com/feeds/api/videos?alt=json-in-script&author=kita0606&callback=init"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="map_canvas" style="width:600px; height:500px;"></div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
	<script type='text/javascript'>
	var currentInfoWindow = null;
	function mapInit() {
	var myLatlng = new google.maps.LatLng(35.6, 139.7);
	var myOptions = {
	zoom: 10,
	center: myLatlng,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

	function mapping(entry) {
	var geo = entry.georss$where.gml$Point.gml$pos.$t.split(/\s/);
	var lat = geo[0];
	var long = geo[1];
	var title = entry.title.$t;
	var videoId = entry.media$group.media$content[0].url.match(/\/v\/([^?]+)/)[1]

	var marker1 = new google.maps.Marker({
	position: new google.maps.LatLng(lat, long),
	map: map,
	title: title,
	icon: new google.maps.MarkerImage('http://maps.google.co.jp/mapfiles/ms/icons/tree.png',
	new google.maps.Size(64, 64),
	new google.maps.Point(0,0),
	new google.maps.Point(0, 32)
	)
	});

	google.maps.event.addListener(marker1, 'click', function() {
	if (currentInfoWindow) {
	currentInfoWindow.close();
	}
	currentInfoWindow = new google.maps.InfoWindow({
	content: '<h3>'+ title +'</h3>' + '<iframe width="560" height="315" src="http://www.youtube.com/embed/' + videoId + '" frameborder="0" allowfullscreen></iframe>'
	});
	currentInfoWindow.open(map, marker1);
	});
	}

	for (var i=0, n=youtube_data.feed.entry.length; i<n; i++) {
	var entry = youtube_data.feed.entry[i];
	if (entry.georss$where) {
	mapping(entry);
	}
	}
	}

	var youtube_data;
	function init(info) {
	youtube_data = info;
	google.maps.event.addDomListener(window, 'load', mapInit);
	}
	</script>
	<script src="https://gdata.youtube.com/feeds/api/videos?alt=json-in-script&author=kita0606&callback=init"></script>
	<style type="text/css">
	</style>
	</head>
	<body>
	<div id="map_canvas" style="width:600px; height:500px;"></div>
	</body>
	</html>