The "Hello World" of Google Maps-GoogleMaps/API/doc/Introduction/01-HelloWorld-N☆E 学習帳

GoogleMaps/API/doc/Introduction/01-HelloWorld
[ リロード ]   [ ソース ]  [ トップ | 一覧 | 単語検索 | 最新 | バックアップ | ヘルプ ]
トップ > GoogleMaps > API > doc > Introduction > 01-HelloWorld
Counter: 4502, today: 2, yesterday: 2
Introduction Prev Next 02-BrowserCompatibility

The "Hello World" of Google Maps

http://www.google.com/apis/maps/docu­mentation/

Version 2 (2006.4)

The easiest way to start learning about this API is to see a simple example. The following web page displays a 500x300 map centered on Palo Alto, California:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm­l1-strict.dtd">
　<html xmlns="http://www.w3.org/1999/xhtml">
　 <head>
　 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
　 <title>Google Maps JavaScript API Example</title>
　 <script src="http://maps.google.com/maps?file=api­& v=2 &key=abcdefg" type="text/javascript"></script>
　 <script type="text/javascript">
　 //<![CDATA[
　
　 function load() {
　　 if (GBrowserIsCompatible()) {
　　　 var map = new GMap2(document.getElementById("map"));
　　　 map.setCenter(new GLatLng(37.4419, -122.1419), 13);
　　 }
　 }
　
　 //]]>
　 </script>
　 </head>
　 <body onload="load()" onunload="GUnload()">
　 <div id="map" style="width: 500px; height: 300px"></div>
　 </body>
　</html>

onunload="GUnload()" でIEでのメモリーリーク問題が改善されているようです。
http://www.google.com/apis/maps/docu­mentation/simple.html
Ctrl + Alt + Delete でタスクマネージャのプロセスを開き、上記スクリプトのサンプルページを IE でリロード（更新）を繰り返してもメモリ使用量は増えていきません。これでIEでの様々な問題が解決するのではないでしょうか。 :)

GPoint → GLatLng に変わって指定する緯度と経度の順番が入れ替わった

You can download this example to edit and play around with it, but you'll have to replace the key in that file with your own Maps API key. (If you register a key for a particular directory, it works for all subdirectories as well.)

The URL in the example above (http://maps.google.com/maps?file=api­&v=2) is the location of a JavaScript file that includes all of the symbols you need for placing Google Maps on your pages. Your page must contain a script tag pointing to that URL, using the key you got when you signed up for the API. If your Maps API key were "abcdefg", then your script tag might look like this:

<script src="http://maps.google.com/maps?file=api­& v=2 &key=abcdefg" type="text/javascript">
</script>

The class that represents a map is GMap2. This class represents a single map on the page. You can create as many instances of this class as you want (one for each map on the page). When you create a new map instance, you specify a named element in the page (usually a div element) to contain the map. Unless you specify a size explicitly for the map, the map uses the size of the container to determine its size.

Version 1

The easiest way to start reading about an API is to see a simple example. This web page displays a 300x300 map centered on Palo Alto:

↓現在2005.12グーグル上では少しだけ変わっているようです。UTF-8指定等が追加されています。bosyタグにonloadに変更になっています。 

<!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 JavaScript API Example - simple</title>
   <script src="http://maps.google.com/maps?file=api&v=1&key=●Maps API key●" type="text/javascript"></script>
 </head>
 <body>
   <div id="map" style="width: 300px; height: 300px"></div>
   <script type="text/javascript">
   //<![CDATA[

   if (GBrowserIsCompatible()) {
     var map = new GMap(document.getElementById("map"));
     map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);
   }

   //]]>
   </script>
 </body>

</html>

（ドキュメントでは abcdefg となっていたところを●Maps API key●に変更）
●Maps API key●には Sign up for an API key にて取得したMaps API keyが入る。
当初は取得したディレクトリ以外では使えなかったが、現在では取得したディレクトリの下層ディレクトリもＯＫ。
ということは、サイトのルートで取得しておけばサイト内すべてＯＫってことかな

You can download this example to edit and play around with it, though you will need to substitute "abcdefg" with your own Maps API key to run the example on your own site.

↓2005.12現在（サブディレクトリＯＫの記述が追加）

You can download this example to edit and play around with it, but you'll have to replace the key in that file with your own Maps API key. (If you register a key for a particular directory, it works for all subdirectories as well.)

As you can see in the example above, Google Maps exports a single JavaScript URL (http://maps.google.com/maps?file=api­&v=1) that includes all of the symbols you need to create Google Maps on your pages. To use the Google Maps API, you need to include a single script tag pointing to that URL with the key you got when you signed up for the API:

↓2005.12現在

The URL in the example above (http://maps.google.com/maps?file=api­&v=1) is the location of a JavaScript file that includes all of the symbols you need for placing Google Maps on your pages. Your page must contain a script tag pointing to that URL, using the key you got when you signed up for the API. If your Maps API key were "abcdefg", then your script tag might look like this: 

<script src="http://maps.google.com/maps?file=api&v=1&key=abcdefg" type="text/javascript"></script>

The main class exported by the Google Maps API is GMap, which represents a single map on the page. You can create as many instances of this class you want (one for each map on the page). A map is embedded in a container, which is typically a div element.

↓2005.12現在

The main class exported by the Google Maps API is GMap, which represents a single map on the page. You can create as many instances of this class as you want (one for each map on the page).
When you create a new map instance, you specify a named element in the page (usually a div element) to contain the map. Unless you specify a size explicitly, the map uses the size of the container to determine its size.

The methods for manipulating and adding overlays to map instances are detailed below.

上記の実行
http://never-ever.info/googlemaps/he­lloworld.php　（別窓）

以下は Documentation に掲載されているものではなく、その下の「download this example」のファイルに書かれていたものです。（2005.12現在は変わっていないようです）

  • bodyタグの外（head内）にスクリプトが書かれています。
  • スタイルシートが追加されています。
  • GBrowserIsCompatible のチェックがなくなっている。
  • charset=UTF-8 がセットされている。 

<!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" xmlns:v="urn:schemas-microsoft-com:vml">
 <head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
   <title>Google Maps API Example - simple</title>
   <style type="text/css">
   v\:* {
     behavior:url(#default#VML);
   }
   </style>
   <script src="http://maps.google.com/maps?file=api&v=1&key=●Maps API key●" type="text/javascript"></script>
   <script type="text/javascript">
   //<![CDATA[

   function onLoad() {
     // The Basics
     //
     // Creates a map and centers it on Palo Alto.

     var map = new GMap(document.getElementById("map"));
     map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);
   }

   //]]>
   </script>
 </head>
 <body onload="onLoad()">
   <div id="map" style="width: 500px; height: 300px"></div>
   <div id="message"></div>
 </body>
</html>

上記の実行
http://never-ever.info/googlemaps/si­mple.php　（別窓）

リロード   差分 ソース ファイル添付 添付ファイル一覧   Wikiトップ 一覧 検索 最終更新 バックアップ   ヘルプ   最終更新のRSS
ページ名:GoogleMaps/API/doc/Introduction/01-HelloWorld
ページ作成: 2006/09/29 21:39:45 JST(6607d)
最終更新: 2006/09/29 21:39:45 JST(6607d)
編集可:
リンクページ:GoogleMaps(6506d) doc(6607d) API(6607d) Introduction(6607d)