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つの主なオプションがあります。centrezoom、および 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>

次の出力を生成します-