Geekなページに、Google MapsのMap Typeを"G_SATELLITE_3D_MAP"にセットすると、Google Earthが表示できるというのでやってみました。
Geekなぺーじ : Google MapsでGoogle Earthを表示する
先日のBarNaviのAPIを使って、銀座コリドー街付近のバーの位置を表示しています。（簡易版なので、クリックしたらバー情報が見られるとかは実装してないです）
通常のGoogle Maps版
Map Typeが"G_SATELLITE_3D_MAP"版
Google EarthのAPIを見ると、Google Maps とはまた微妙に異なるAPIの使い方（書き方）になっているようですが、Google MapsのMap typeを変更する方法だと、マーカの表示はそのままのコードで動きました。
うまくすると、「Google Earthが使える人は3Dで、そうでない人は通常のMapで」という自動切り替えが実装できるのかも。
↓今回作ったコードはこちらです。
javascript
google.load("feeds", "1");
var map;
var map2;
function initialize() {
init(G_NORMAL_MAP);
}
function initialize2() {
init(G_SATELLITE_3D_MAP);
}
function init(type){
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(35.671051, 139.760535), 18);
map.setMapType(type);
var obj = {
"key":"barnavi-api-key"
,"pattern":"1"
,"lat":"35.671051"
,"lng":"139.760535"
,"range":"1000"
,"datum":"world"
,"type":"0"
,"_callback":"cb"
}
var url = getRequestUrl(obj);
$.getScript(url);
}
}
function getRequestUrl(obj){
var base = 'http://pipes.yahoo.com/pipes/pipe.run?_id=7J43uok43RGoLtmxTqoASA&_render=json';
var param = [];
for(p in obj){
param.push(p + '=' +obj[p]);
}
return base + '&' + param.join('&');
}
function cb(data){
var shops = data.value.items;
for(var i = 0,len = shops.length;i<len;i++){
var point = new GLatLng(shops[i].lat_world,shops[i].lng_world);
map.addOverlay(new GMarker(point));
}
}
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="./css/main.css" type="text/css"><link>
<title>Google Maps</title>
<script type="text/javascript" src="http://www.google.com/jsapi?key=apikey">
</script>
<script type="text/javascript">
google.load("jquery", "1.2.6");
google.load("maps","2.x");
</script>
<script type="text/javascript" src="./js/s.js">
</script>
<script type="text/javascript">
$(initialize);//Earth風のときはinitialize2を使う
$(window).unload(GUnload);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
