Google Maps APIのhello worldの例

投稿日: 2019-11-05 2019-11-05
タグ: google map, 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="https://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を含める必要があります。

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

===  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）"

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

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

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

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

===  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]

getdocs

13036