March 17,2009

Google Map 全螢幕語法



剛剛在某個網站看到有全螢幕的Google Map可瀏覽,令常常在研究地圖的我好生心動。
於是找了幾個國內外網站相關教學,自己弄了一個全螢幕Google map網頁..。

Tomoo's Google Map
(請點選看看,如果是Firefox用戶可接著按 F11放全螢幕)

點入文章有Html原始碼可參考..

在開始之前,先提醒您,必須先申請自己的Google Map API key,才能夠在自己的網頁中載入Google Map。

Google Map API申請網址



HTML Code 如下



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Google Maps Full Screen</title>

//以下這段要將key換成自己的才行!

<script src="http://maps.google.com/maps?

file=api&v=2&key=ABQIAAAAbH5QalZthKNyAGjILUSjUxQ5_W22ppizZ1bVFazS6LxQ

WtUfrBSra8Xa3NdY3YfF3Lvv64XTyUuucA"
type="text/javascript"></script>

  </script>
 
//就是這裡讓他變成全螢幕的

<!-- Make the document body take up the full screen -->

<style type="text/css"> v\:* {behavior:url(#default#VML);} html, body {width: 100%;

height: 100%} body {margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-

bottom: 0px} </style>

</head>

<body>

  <!-- Declare the div, make it take up the full document body -->
  <div id="map" style="width: 100%; height: 100%;"></div>

  <!-- This div just for the description -->
  <div style="top:25px; left:50px; position:absolute; background-color:white; border:2px

solid black;">
     Tomoo's Gmap Full<br/>
  </div>
  <script type="text/javascript">
    //<![CDATA[       

    var map;
    if (GBrowserIsCompatible()) {
      map = new GMap(document.getElementById("map"));
      map.centerAndZoom(new GPoint(121.535944, 25.033953), 1);

//顯示G map的控制項
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());

// Monitor the window resize event and let the map know when it occurs if

(window.attachEvent) { window.attachEvent("onresize", function() {this.map.onResize()}

); } else { window.addEventListener("resize", function() {this.map.onResize()} , false); }

    }

    //]]>
  </script>

</body></html>





此文件參考了下列兩個網站製作而成,thank you very much :)

http://my-web-design.blogspot.com/2007/09/google-maps-api.html
http://www.leapbeyond.com/ric/scuba/appletdemo/FullScreenMap.htm


Posted by tomoolin at 樂多Roodo! │21:26 │回應(3)引用(0)
樂多分類:日記/一般 工具:編輯本文
Ads by Roodo! 

引用URL

http://cgi.blog.roodo.com/trackback/8533817
回應文章

cool
不過網路慢的話, 圖檔越多下載就越花時間
Posted by dennis at March 17,2009 23:26

因為我常用Google Map截圖...這樣就不用小張小張還用PS拼貼了!
Posted by tomoo at March 17,2009 23:53

無料出会い系サイトを知っていますか?無料出会いサイトを紹介しています。無料出会いサイトは無料が故登録者が毎日1000人はいます。無料出会いを皆望んでいるんですね!無料出会いサイトにはとってもお得な機能があります。無料出会いサイトの優良情報は、無料出会いに登録している皆様にお送りしています。無料出会いで新しい出会いを探してみませんか?無料出会い系サイトは本当にお得ですね。これだけ無料出会いサイトが流行るのも納得です。無料出会いサイトには今日も利用者の声が届いています。『無料出会いサイトで恋人が出来ました!』『無料出会いサイトがあって良かった!』『無料出会いサイトは最高!』『無料出会い系サイトで彼氏が出来ました。』っという風に毎日無料出会いサイトで新しい出会いが生まれています。こんなに支持されている無料出会いサイトを利用しない手はないですよね。無料出会いサイトは今日も沢山の人で賑わっています。貴方も今すぐ無料出会いサイトで良い出会いを探してみませんか?無料出会いサイトは皆様の出会いを応援しています。これからも無料出会いサイトをよろしくお願いします。
Posted by 出会い at April 8,2009 14:39