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を介して関数をロードするだけです。