Google Earth on Google Maps (でぃべろっぱーず・さいど)

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>