Google Maps APIのhello worldの例

Google Maps API Hello Worldの例

Google Maps Javascript API v3を介してWebページにGoogleマップを表示するためのシンプルなHelloWorldガイド。

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

完全な例…



Google Map Hello World Example







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

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

Googleマップは要素ID「map_container」に表示されます。

//...


//...

2. Google Maps APIを読み込む

Google Maps APIを使用するには、ウェブページに次のJavaScriptを含めるだけです。

What is sensor?
センサー(通常、携帯電話センサー)は、ユーザーの位置を特定するために使用されます。

3. 緯度と経度

地球上のすべての場所は、緯度と経度、またはいわゆる「geographic coordinates」で表すことができます。詳細については、このwiki geographic coordinateを参照してください。

Note
個人的には、緯度と経度がどのように機能するかはよくわかりません。簡単に言えば、緯度をy座標で、経度をx座標で考えてください。 誰かがそれについてもっと説明してくれれば幸いです:)

この例では、このlatitude and longitude finder websiteを介して「MalimNawar」の緯度と経度を見つけることができます。 次に、緯度と経度を「var latlng = new google.maps.LatLng(Latitude, Longitude)」のように配置します。

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

4. Googleマップオプションを構成する

設定可能な値は一目瞭然です。 サポートされているGoogle map optionsのリストについては、このリファレンスを参照してください。

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

function loadMap() {
    //...
    var map = new google.maps.Map(document.getElementById("map_container"),myOptions);
    //...
}

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

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

5. Googleマップを読み込む

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