Google Maps APIのhello worldの例

このチュートリアルでは、「Malim Nawar、Malaysia」(私の故郷)を中心としたマップを表示し、「マーカー(小さなアイコン)」を使用して地図上の場所を識別する方法を示します。

完全な例…​

<html>
<head>
<title>Google Map Hello World Example</title>
<style type="text/css">
div#map__container{
    width:100%;
    height:350px;
}
</style>
<script type="text/javascript"
   src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
  function loadMap() {
    var latlng = new google.maps.LatLng(4.3695030, 101.1224120);
    var myOptions = {
      zoom: 4,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map__container"),myOptions);

    var marker = new google.maps.Marker({
      position: latlng,
      map: map,
      title:"my hometown, Malim Nawar!"
    });

  }
</script>
</head>

<body onload="loadMap()">
<div id="map__container"></div>
</body>

</html>

以下の説明を参照してください。

1. Googleマップを表示する場所

Google mapは要素id " map__container "に表示されます。

…​.//…​ <style type="text/css"> div#map__container{ width:600px; height:500px; } </style>

<div id="map__container"></div>//…​

===  2. Google Maps APIを読み込む

Google Maps APIを使用するには、ウェブページに次のJavaScriptを含める必要があります。

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"> </script>

** センサとは何ですか?**  +センサ(通常は携帯電話センサ)は、ユーザの位置を特定するために使用されます。

===  3.緯度と経度

地球上のすべての場所は、緯度と経度または「** 地理座標** 」で表すことができます。詳しくはhttp://en.wikipedia.org/wiki/Geographic__coordinate__system[wiki地理座標を参照してください。

** 注意** 個人的には、緯度と経度の仕組みが分かりません。単純に入れてください。ちょうどy座標と経度のx座標を使って緯度を考えてください。誰かがそれについてもっと詳しく説明していただければ幸いです:)

この例では、「Malim Nawar」の緯度と経度は、http://www.findlatitudeandlongitude.com/[latitude and longitude finderのWebサイトを参照してください。次に、このような緯度と経度を置きます。 "var latlng = new google.maps.LatLng(Latitude、Longitude)"

<script type="text/javascript"> function loadMap() { var latlng = new google.maps.LatLng(4.3695030, 101.1224120); //…​ } </script>

** ジオコーディング** 住所を「緯度と経度」に変換するプロセスはジオコーディングと呼ばれます。次のチュートリアルで、より多くのジオコーディングの例を提供します。

===  4. Google Mapsオプションを設定する

設定可能な値は自明です。サポートされているhttp://code.google.com/apis/maps/documentation/javascript/reference.html#MapOptions[Google map options]のリストについては、このリファレンスを参照してください。

<script type="text/javascript"> function loadMap() { //…​ var myOptions = { zoom: 4, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; //…​ } </script>

「map__container」という名前のHTML要素IDにGoogleマップを表示します。

function loadMap() { //…​ var map = new google.maps.Map(document.getElementById("map__container"),myOptions); //…​ } </script>

マーカー(小さなアイコン)を作成し、マーカー上にマウスを重ねると表示位置と定義済みのメッセージボックスを設定します。

function loadMap() { //…​ var marker = new google.maps.Marker({ position: latlng, map: map, title:"my hometown, Malim Nawar!" }); //…​ } </script>

===  5. Googleマップを読み込む

最後のステップは、body onloadで関数をロードするだけです。

<body onload="loadMap()">

===  6.結果

link://wp-content/uploads/googlemaps/google-map-hello-world.html[このサンプルをダウンロード]

=== 参考文献

.  http://code.google.com/apis/maps/documentation/javascript/tutorial.html[Google

Maps APIチュートリアル]。 http://en.wikipedia.org/wiki/Geographic__coordinate__system[Geographic

座標系(wiki)]。 http://www.findlatitudeandlongitude.com/[緯度と経度を見つけるためのウェブサイト

経度]

link://タグ/google-map/[google map]link://タグ/hello-world/[hello world]