Googleマップ-はじめに

Googleマップとは何ですか？

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

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

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

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

以下の手順に従って、Webページにマップをロードします-

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

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

<!DOCTYPE html>
<html>
   
   <head>
   </head>
   
   <body>
   ..............
   </body>
   
</html>

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

以下に示すように、スクリプトタグを使用してGoogle MapsAPIをロードまたはインクルードします-

<!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オブジェクト（リテラルと同じように作成されます）およびマップ初期化変数の値を設定します。マップには3つの主なオプションがあります。centre、 zoom、および maptypeid。

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

関数内で、たとえば、 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：マップオブジェクトを作成する

と呼ばれるJavaScriptクラスをインスタンス化することでマップを作成できます Map。このクラスをインスタンス化するときに、必要なマップのマップとマップオプションを保持する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()">

例

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

<!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>

次の出力を生成します-