More Related Content More from Mariko Goda (6) 3. • (@MaripoGoda)
•
• “ToriSat”
• Geo (Android, iOS, Web etc)
•
4. iPhone Android
, ,
2011 1 27
11. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/
html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?
sensor=false">
</script>
<script type="text/javascript">
function initMap(){
var latlng = new google.maps.LatLng(35.699355, 139.77049);
var option = {
zoom: 18,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: true
};
var map = new google.maps.Map(document.getElementById("map"), option);
}
</script>
<title>Hello Street View</title>
</head>
<body onload="initMap()">
<div id="map" style="width:600px;height:400px;"></div>
</body>
</html>
12. var latlng = new google.maps.LatLng(35.699355, 139.77049);
var option = {
zoom: 18,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: true
};
var map = new google.maps.Map(document.getElementById("map"), option);
pegman
streetViewControll: false streetViewControll: true
13. var streetOption = {
position: latlng, //
pov: {heading: 45, pitch: 15, zoom: 1} //
};
var div = document.getElementById("street");
var panorama = new google.maps.StreetViewPanorama
(div, streetOption);
map.setStreetView(panorama);
15. POV
( )
POV
(Point of View)
http://commons.wikimedia.org/wiki/File:Flatiron_fisheye.jpg
17. var svService = new google.maps.StreetViewService();
svService.getPanoramaByLocation(
latlng, //
50, // ( )
function(/*StreetViewPanorama*/panorama,
/*StreetViewStatus*/status){
//
}); ( null)
18. POV ( )
• heading ( ) API yaw
• pitch ( )
• zoom ( )
pitch
heading
24. google.maps.event.addListener(panorama, 'links_changed', function(){
if (panorama.getLinks() && 2 == panorama.getLinks().length) {
for (var i = 0; i < panorama.getLinks().length; i++) {
if (prevLatLng != panorama.getLinks()[i].pano) {
svService.getPanoramaById(panorama.getLinks()[i].pano,
checkLinkDirection(panorama.getPosition(), prevLatLng, panorama.getLinks()[i].pano));
}
}
}
map.setCenter(panorama.getPosition());
});
function checkLinkDirection(_position, _prevLatLng, pano){
return function(newPanorama, status){
if (!newPanorama) return;
var prevAngle = getAngle(_position, _prevLatLng);
var newAngle = getAngle(newPanorama.location.latLng, _position);
if (Math.abs(newAngle - prevAngle) < Math.PI * 0.8) {
prevLatLng = panorama.getPosition();
panorama.setPov({
heading: newAngle * 180.0 / Math.PI,
pitch: 0, zoom: 1
});
panorama.setPano(pano);
}
}
}
25. • pano_changed ID
• position_changed
• pov_changed
• links_changed
• visible_changed
/
28. var marker = new google.maps.Marker({
position: latLng,
map: map,
title: placeName
});
30. var starIcon = new google.maps.MarkerImage('http://www.example.com/
star.png');
var marker = new google.maps.Marker({
position: new google.maps.LatLng(place.lat, place.lng),
map: map, icon: starIcon, title: place.label
});
34. GeoPoint point = map.getMapCenter();
Uri uri = Uri.parse("google.streetview:cbll="
+ point.getLatitudeE6()/1E6
+ ","
+ point.getLongitudeE6()/1E6);
startActivity(new Intent(Intent.ACTION_VIEW, uri));
35. Hack AR
http://www.sightspacestation.com/
37. Hack VR
http://www.youtube.com/watch?v=DG1FWa-0XrE
39. Google Maps JavaScript API V3
- Google Maps JavaScript API V3
- Google Code
http://code.google.com/intl/ja/apis/maps/documentation/
javascript/services.html#StreetView
