Googleマップ-はじめに

Googleマップとは何ですか？

Googleマップは、さまざまな種類の地理情報を提供するGoogleの無料のWebマッピングサービスです。 Googleマップを使用すると、できます。

場所を検索するか、ある場所から別の場所への道順を取得します。
世界中のさまざまな都市の水平および垂直のパノラマ通りレベルの画像を表示およびナビゲートします。
特定のポイントでのトラフィックなどの特定の情報を取得します。

Googleマップは、地図と地図に表示される情報をカスタマイズできるAPIを提供します。この章では、HTMLとJavaScriptを使用してWebページに簡単なGoogleマップを読み込む方法について説明します。

Webページにマップをロードする手順

Webページにマップをロードするには、以下の手順に従ってください-

ステップ1：HTMLページを作成する

以下に示すように、headおよびbodyタグを使用して基本的なHTMLページを作成します-

<!DOCTYPE html>
<html>

   <head>
   </head>

   <body>
   ..............
   </body>

</html>

ステップ2：APIをロードする

以下に示すように、スクリプトタグを使用してGoogle Maps APIをロードまたは組み込みます-

<!DOCTYPE html>
<html>

   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
   </head>

   <body>
   ..............
   </body>

</html>

ステップ3：コンテナを作成する

マップを保持するには、コンテナ要素を作成する必要があります。通常、この目的には<div>タグ（汎用コンテナ）が使用されます。コンテナ要素を作成し、以下に示すようにその寸法を定義します-

<div id = "sample" style = "width:900px; height:580px;"></div>

ステップ4：マップオプション

マップを初期化する前に、 mapOptions オブジェクト（リテラルのように作成されます）を作成し、マップ初期化変数の値を設定する必要があります。マップには、 centre 、 zoom 、および maptypeid の3つの主要オプションがあります。

centre -このプロパティの下で、マップを中央に配置する場所を指定する必要があります。場所を渡すには、必要な場所の緯度と経度をコンストラクターに渡して LatLng オブジェクトを作成する必要があります。
zoom -このプロパティでは、マップのズームレベルを指定する必要があります。
* maptypeid *-このプロパティでは、必要なマップのタイプを指定する必要があります。 Googleが提供するマップの種類は次のとおりです-
ROADMAP（通常、デフォルトの2Dマップ）
SATELLITE（写真マップ）
HYBRID（2つ以上の他のタイプの組み合わせ）
地形（山、川などの地図）

関数（* loadMap（）*など）内で、mapOptionsオブジェクトを作成し、以下に示すように、center、zoom、およびmapTypeIdに必要な値を設定します。

function loadMap() {
   var mapOptions = {
      center:new google.maps.LatLng(17.240498, 82.287598),
      zoom:9,
      mapTypeId:google.maps.MapTypeId.ROADMAP
   };
}

ステップ5：マップオブジェクトを作成する

*Map* というJavaScriptクラスをインスタンス化することにより、マップを作成できます。 このクラスをインスタンス化する際、HTMLコンテナーを渡して、マップと必要なマップのマップオプションを保持する必要があります。 以下に示すように、マップオブジェクトを作成します。

var map = new google.maps.Map(document.getElementById("sample"),mapOptions);

ステップ6：マップをロードする

最後に、loadMap（）メソッドを呼び出すか、DOMリスナーを追加して、マップをロードします。

google.maps.event.addDomListener(window, 'load', loadMap);
                    or
<body onload = "loadMap()">

例

次の例は、Vishakhapatnamという名前の都市のロードマップをズーム値12でロードする方法を示しています。

<!DOCTYPE html>
<html>

   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>

      <script>
         function loadMap() {

            var mapOptions = {
               center:new google.maps.LatLng(17.609993, 83.221436),
               zoom:12,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }

         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>

   </head>

   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

それは次の出力を生成します-

Google-maps-getting-started

目次