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マップ-タイプ

前の章では、基本的なマップをロードする方法について説明しました。ここでは、必要なマップタイプを選択する方法を説明します。

地図の種類

Googleマップは4種類の地図を提供します。彼らは-

ROADMAP -これはデフォルトのタイプです。タイプを選択していない場合は、これが表示されます。選択した地域のストリートビューが表示されます。
SATELLITE -これは、選択した地域の衛星画像を表示するマップタイプです。
ハイブリッド-このマップタイプは、衛星画像上の主要な通りを示しています。
TERRAIN -これは、地形と植生を示すマップタイプです

構文

これらのマップタイプのいずれかを選択するには、以下に示すように、マップオプションでそれぞれのマップタイプIDを指定する必要があります-

var mapOptions = {
   mapTypeId:google.maps.MapTypeId.Id of the required map type
};

ロードマップ

次の例は、タイプROADMAPのマップを選択する方法を示しています-

<!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:9,
               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>

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

衛星

次の例は、SATELLITEタイプのマップを選択する方法を示しています-

<!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:9,
                  mapTypeId:google.maps.MapTypeId.SATELLITE
            };

            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>

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

ハイブリッド

次の例は、タイプHYBRIDのマップを選択する方法を示しています-

<!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:9,
               mapTypeId:google.maps.MapTypeId.Hybrid
            };

            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>

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

地形

次の例は、TERRAINタイプのマップを選択する方法を示しています-

<!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:9,
               mapTypeId:google.maps.MapTypeId.TERRAIN
            };

            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マップ-ズーム

ズーム値を増やす/減らす

マップオプションの zoom 属性の値を変更することにより、マップのズーム値を増減できます。

構文

ズームオプションを使用して、マップのズーム値を増減できます。以下は、現在のマップのズーム値を変更する構文です。

var mapOptions = {
   zoom:required zoom value
};

例：ズーム6

次のコードは、Vishakhapatnam市のロードマップをズーム値6で表示します。

<!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:6,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };

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

   </head>

   <body onload = "loadMap()">
      <div id = "sample" style = "width:587px; height:400px;"></div>
   </body>

</html>

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

例：ズーム10

次のコードは、ズーム値10で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:10,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };

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

   </head>

   <body onload = "loadMap()">
      <div id = "sample" style = "width:587px; height:400px;"></div>
   </body>

</html>

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

Googleマップ-ローカリゼーション

デフォルトでは、地図に記載されている都市名とオプション名は英語です。必要に応じて、そのような情報を他の言語でも表示できます。このプロセスは*ローカリゼーション*として知られています。この章では、マップをローカライズする方法を学びます。

地図のローカライズ

以下に示すように、URLで言語オプションを指定することにより、マップの言語をカスタマイズ（ローカライズ）できます。

<script src = "https://maps.googleapis.com/maps/api/js?language=zh-Hans"></script>

例

GoogleMapsをローカライズする方法を示す例を次に示します。ここでは、中国語にローカライズされた中国のロードマップを見ることができます。

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js?language=zh-Hans"></script>

      <script>
         function loadMap() {

            var mapOptions = {
               center:new google.maps.LatLng(32.870360, 101.645508),
               zoom:9,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };

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

   </head>

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

</html>

出力

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

Googleマップ-UIコントロール

Googleマップは、ユーザーが地図を操作できるようにするためのさまざまなコントロールを備えたユーザーインターフェイスを提供します。これらのコントロールを追加、カスタマイズ、および無効にすることができます。

デフォルトのコントロール

以下は、Googleマップが提供するデフォルトのコントロールのリストです-

ズーム-マップのズームレベルを増減するには、＆plus;付きのスライダーを使用します。および-ボタン、デフォルトで。このスライダーは、マップの左側の角にあります。
パン-ズームスライダーのすぐ上に、マップをパンするためのパンコントロールがあります。
マップの種類-マップの右上隅にこのコントロールを配置できます。衛星、ロードマップ、地形などのマップタイプオプションを提供します。ユーザーはこれらのマップのいずれかを選択できます。
ストリートビュー-パンアイコンとズームスライダーの間に、ペグマンアイコンがあります。ユーザーはこのアイコンをドラッグして特定の場所に配置すると、ストリートビューが表示されます。

例

Googleマップが提供するデフォルトのUIコントロールを確認できる例を次に示します-

UIのデフォルトコントロールを無効にする

マップオプションで disableDefaultUI 値をtrueにするだけで、Googleマップが提供するデフォルトのUIコントロールを無効にできます。

例

次の例は、Googleマップが提供するデフォルトのUIコントロールを無効にする方法を示しています。

<!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:5,
               mapTypeId:google.maps.MapTypeId.ROADMAP,
               disableDefaultUI: true
            };

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

   </head>

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

</html>

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

すべてのコントロールの有効化/無効化

これらのデフォルトのコントロールに加えて、Googleマップには以下にリストする3つのコントロールも用意されています。

スケール-スケールコントロールは、マップスケール要素を表示します。このコントロールはデフォルトでは有効になっていません。
回転-回転コントロールには、斜めの画像を含むマップを回転できる小さな円形のアイコンが含まれています。このコントロールは、デフォルトでマップの左上隅に表示されます。（詳細については、45°画像を参照してください。）
概要-マップのズームレベルを増減するには、＆plus;のスライダーがあります。および-ボタン、デフォルトで。このスライダーは、マップの左隅にあります。

マップオプションでは、以下に示すように、Googleマップが提供するコントロールを有効または無効にできます-

{
   panControl: boolean,
   zoomControl: boolean,
   mapTypeControl: boolean,
   scaleControl: boolean,
   streetViewControl: boolean,
   overviewMapControl: boolean
}

例

次のコードは、すべてのコントロールを有効にする方法を示しています-

<!DOCTYPE html>
<html>

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

      <script>
         function loadMap() {

            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               panControl: true,
               zoomControl: true,
               scaleControl: true,
               mapTypeControl:true,
               streetViewControl:true,
               overviewMapControl:true,
               rotateControl:true
            }

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

   </head>

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

</html>

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

制御オプション

コントロールオプションを使用して、Googleマップコントロールの外観を変更できます。たとえば、ズームコントロールのサイズを縮小または拡大できます。 MapTypeコントロールの外観は、水平バーまたはドロップダウンメニューに変更できます。以下に、ズームコントロールとMapTypeコントロールのコントロールオプションのリストを示します。

Sr.No.	Control Name	Control Options
1	Zoom control	google.maps.ZoomControlStyle.SMALL google.maps.ZoomControlStyle.LARGE google.maps.ZoomControlStyle.DEFAULT
2	MapType control	google.maps.MapTypeControlStyle.HORIZONTAL_BAR google.maps.MapTypeControlStyle.DROPDOWN_MENU google.maps.MapTypeControlStyle.DEFAULT

例

次の例は、制御オプションを使用する方法を示しています-

<!DOCTYPE html>
<html>

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

      <script>
         function loadMap() {

            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               mapTypeControl: true,

               mapTypeControlOptions: {
                  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, mapTypeIds: [
                     google.maps.MapTypeId.ROADMAP,
                     google.maps.MapTypeId.TERRAIN
                  ]
               },

               zoomControl: true,

               zoomControlOptions: {
                  style: google.maps.ZoomControlStyle.SMALL
               }
            }

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

   </head>

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

</html>

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

位置決めの制御

コントロールのオプションに次の行を追加して、コントロールの位置を変更できます。

position:google.maps.ControlPosition.Desired_Position,

これは、コントロールをマップ上に配置できる使用可能な位置のリストです-

TOP_CENTER
左上
右上
LEFT_TOP
RIGHT_TOP
LEFT_CENTER
RIGHT_CENTER
LEFT_BOTTOM
RIGHT_BOTTOM
BOTTOM_CENTER
左下の
右下

例

次の例は、MapTypeidコントロールをマップの上部中央に配置する方法と、ズームコントロールをマップの下部中央に配置する方法を示しています。

<!DOCTYPE html>
<html>

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

      <script>
         function loadMap() {

            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               mapTypeControl: true,

               mapTypeControlOptions: {
                  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                  position:google.maps.ControlPosition.TOP_CENTER,

                  mapTypeIds: [
                     google.maps.MapTypeId.ROADMAP,
                     google.maps.MapTypeId.TERRAIN
                  ]
               },

               zoomControl: true,

               zoomControlOptions: {
                  style: google.maps.ZoomControlStyle.SMALL,
                  position:google.maps.ControlPosition.BOTTOM_CENTER
               }
            }

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

   </head>

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

</html>

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

Googleマップ-マーカー

マップ上にオブジェクトを描画し、それらを目的の緯度と経度にバインドできます。これらはオーバーレイと呼ばれます。 Googleマップには、以下に示すようなさまざまなオーバーレイが用意されています。

マーカー
ポリライン
ポリゴン
円と長方形
情報ウィンドウ
シンボル

地図上の1つの場所をマークするために、Googleマップは*マーカー*を提供します。これらのマーカーは標準のシンボルを使用し、これらのシンボルはカスタマイズできます。この章では、マーカーを追加する方法、およびマーカーをカスタマイズ、アニメーション化、および削除する方法について説明します。

シンプルマーカーの追加

以下に示すように、マーカークラスをインスタンス化し、latlngを使用してマークする位置を指定することにより、マップの目的の場所に簡単なマーカーを追加できます。

var marker = new google.maps.Marker({
   position: new google.maps.LatLng(19.373341, 78.662109),
   map: map,
});

例

次のコードは、都市ハイデラバード（インド）にマーカーを設定します。

<!DOCTYPE html>
<html>

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

      <script>
         function loadMap() {

            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:7
            }

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

            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.088291, 78.442383),
               map: map,
            });
         }
      </script>

   </head>

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

</html>

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

マーカーのアニメーション化

マップにマーカーを追加したら、さらに進んで bounce や drop などのアニメーションを追加できます。次のコードスニペットは、マーカーにバウンスおよびドロップアニメーションを追加する方法を示しています。

//To make the marker bounce`
animation:google.maps.Animation.BOUNCE

//To make the marker drop
animation:google.maps.Animation.Drop

例

次のコードは、アニメーション効果を追加して都市ハイデラバードにマーカーを設定します-

<!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.377631, 78.478603),
               zoom:5
            }

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

            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.377631, 78.478603),
               map: map,
               animation:google.maps.Animation.Drop
            });
         }
      </script>

   </head>

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

</html>

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

マーカーのカスタマイズ

Googleマップが提供するデフォルトのアイコンの代わりに、独自のアイコンを使用できます。アイコンを icon： 'ICON PATH' に設定するだけです。 draggable：true を設定することで、このアイコンをドラッグ可能にできます。

例

次の例は、目的のアイコンにマーカーをカスタマイズする方法を示しています-

<!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.377631, 78.478603),
               zoom:5
            }

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

            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.377631, 78.478603),
               map: map,
               draggable:true,
               icon:'/scripts/img/logo-footer.png'
            });

            marker.setMap(map);
         }
      </script>

   </head>

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

</html>

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

マーカーを削除する

marker.setMap（）*メソッドを使用してマーカーをnullに設定すると、既存のマーカーを削除できます。

例

次の例は、マップからマーカーを削除する方法を示しています-

<!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.377631, 78.478603),
               zoom:5
            }

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

            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.377631, 78.478603),
               map: map,
               animation:google.maps.Animation.Drop
            });

            marker.setMap(null);
         }
      </script>

   </head>

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

</html>

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

Googleマップ-シェイプ

前の章では、Googleマップでマーカーを使用する方法を学びました。マーカーとともに、円、多角形、長方形、ポリラインなどのさまざまな形状を追加することもできます。この章では、Googleマップが提供する図形の使用方法について説明します。

ポリライン

Googleマップが提供するポリラインは、さまざまなパスを追跡するのに役立ちます。クラス google.maps.Polyline をインスタンス化することにより、マップにポリラインを追加できます。このクラスをインスタンス化するときに、StrokeColor、StokeOpacity、strokeWeightなどのポリラインのプロパティに必要な値を指定する必要があります。

オブジェクトをメソッド* setMap（MapObject）*に渡すことで、マップにポリラインを追加できます。 SetMap（）メソッドにnull値を渡すことにより、ポリラインを削除できます。

例

次の例は、デリー、ロンドン、ニューヨーク、北京の都市間のパスを強調するポリラインを示しています。

<!DOCTYPE html>
<html>

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

      <script>
         function loadMap(){

            var mapProp = {
               center:new google.maps.LatLng(51.508742,-0.120850),
               zoom:3,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

            var tourplan = new google.maps.Polyline({
               path:[
                  new google.maps.LatLng(28.613939, 77.209021),
                  new google.maps.LatLng(51.507351, -0.127758),
                  new google.maps.LatLng(40.712784, -74.005941),
                  new google.maps.LatLng(28.213545, 94.868713)
               ],

               strokeColor:"#0000FF",
               strokeOpacity:0.6,
               strokeWeight:2
            });

            tourplan.setMap(map);
           //to remove plylines
           //tourplan.setmap(null);
         }
      </script>

   </head>

   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>

</html>

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

ポリゴン

ポリゴンは、州または国の特定の地理的領域を強調するために使用されます。クラス google.maps.Polygon をインスタンス化することにより、目的のポリゴンを作成できます。インスタンス化中に、path、strokeColor、strokeOapacity、fillColor、fillOapacityなどのPolygonのプロパティに必要な値を指定する必要があります。

例

次の例は、ポリゴンを描画してハイデラバード、ナグプール、オーランガバードの都市を強調表示する方法を示しています。

<!DOCTYPE html>
<html>

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

      <script>
         function loadMap(){

            var mapProp = {
               center:new google.maps.LatLng(17.433053, 78.412172),
               zoom:4,
               mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

            var myTrip = [
               new google.maps.LatLng(17.385044, 78.486671),
               new google.maps.LatLng(19.696888, 75.322451),
               new google.maps.LatLng(21.056296, 79.057803),
               new google.maps.LatLng(17.385044, 78.486671)
            ];

            var flightPath = new google.maps.Polygon({
               path:myTrip,
               strokeColor:"#0000FF",
               strokeOpacity:0.8,
               strokeWeight:2,
               fillColor:"#0000FF",
               fillOpacity:0.4
            });

            flightPath.setMap(map);
         }
      </script>

   </head>

   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>

</html>

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

長方形

長方形を使用して、長方形のボックスを使用して、特定の地域または州の地理的領域を強調表示できます。クラス google.maps.Rectangle をインスタンス化することにより、地図上に長方形を作成できます。インスタンス化中に、path、strokeColor、strokeOapacity、fillColor、fillOapacity、strokeWeight、boundsなどの四角形のプロパティに目的の値を指定する必要があります。

例

次の例は、長方形を使用して地図上の特定の領域を強調表示する方法を示しています-

<!DOCTYPE html>
<html>

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

      <script>
         function loadMap(){

            var mapProp = {
               center:new google.maps.LatLng(17.433053, 78.412172),
               zoom:6,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

            var myrectangle = new google.maps.Rectangle({
               strokeColor:"#0000FF",
               strokeOpacity:0.6,
               strokeWeight:2,

               fillColor:"#0000FF",
               fillOpacity:0.4,
               map:map,

               bounds:new google.maps.LatLngBounds(
                  new google.maps.LatLng(17.342761, 78.552432),
                  new google.maps.LatLng(16.396553, 80.727725)
               )

            });
         }
      </script>

   </head>

   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
</html>

これにより、次の出力が得られます-

サークル

長方形と同様に、サークルを使用して、クラス google.maps.Circle をインスタンス化することにより、特定の地域の地理的領域または州を円で強調表示できます。インスタンス化中に、パス、strokeColor、strokeOapacity、fillColor、fillOapacity、strokeWeight、radiusなどの円のプロパティに必要な値を指定する必要があります。

例

次の例は、円を使用してニューデリー周辺のエリアを強調表示する方法を示しています-

<!DOCTYPE html>
<html>

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

      <script>
         function loadMap(){

            var mapProp = {
               center:new google.maps.LatLng(28.613939,77.209021),
               zoom:5,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

            var myCity = new google.maps.Circle({
               center:new google.maps.LatLng(28.613939,77.209021),
               radius:150600,

               strokeColor:"#B40404",
               strokeOpacity:0.6,
               strokeWeight:2,

               fillColor:"#B40404",
               fillOpacity:0.6
            });

            myCity.setMap(map);
         }
      </script>

   </head>

   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>

</html>

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

Googleマップ-情報ウィンドウ

マーカー、ポリゴン、ポリライン、およびその他の幾何学的図形に加えて、マップ上に情報ウィンドウを描画することもできます。この章では、情報ウィンドウの使用方法について説明します。

ウィンドウを追加する

情報ウィンドウは、あらゆる種類の情報をマップに追加するために使用されます。たとえば、地図上の場所に関する情報を提供する場合は、情報ウィンドウを使用できます。通常、情報ウィンドウはマーカーに添付されます。 google.maps.InfoWindow クラスをインスタンス化して、情報ウィンドウを添付できます。次のプロパティがあります-

コンテンツ-このオプションを使用して、文字列形式でコンテンツを渡すことができます。
位置-このオプションを使用して情報ウィンドウの位置を選択できます。
maxWidth -デフォルトでは、情報ウィンドウの幅はテキストが折り返されるまで拡大されます。 maxWidthを指定することにより、情報ウィンドウのサイズを水平方向に制限できます。

例

次の例は、マーカーを設定し、その上の情報ウィンドウを指定する方法を示しています-

<!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.433053, 78.412172),
               zoom:5
            }

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

            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.433053, 78.412172),
               map: map,
               draggable:true,
               icon:'/scripts/img/logo-footer.png'
            });

            marker.setMap(map);

            var infowindow = new google.maps.InfoWindow({
               content:"388-A , Road no 22, Jubilee Hills, Hyderabad Telangana, INDIA-500033"
            });

            infowindow.open(map,marker);
         }
      </script>

   </head>

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

</html>

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

Googleマップ-シンボル

マーカー、ポリゴン、ポリライン、およびその他の幾何学的形状に加えて、事前定義されたベクター画像（シンボル）をマップに追加することもできます。この章では、Googleマップが提供する記号の使用方法について説明します。

シンボルを追加する

Googleは、マーカーまたはポリラインで使用できるさまざまなベクターベースの画像（シンボル）を提供しています。他のオーバーレイと同様に、これらの事前定義されたシンボルをマップに描画するには、それぞれのクラスをインスタンス化する必要があります。以下は、Googleが提供する定義済みのシンボルとそのクラス名のリストです-

円-google.maps.SymbolPath.CIRCLE
後方を指す矢印（閉じた）-google.maps.SymbolPath.BACKWARD_CLOSED_ARROW
前方を指す矢印（閉じた）-google.maps.SymbolPath.FORWARD_CLOSED_ARROW
前方を指す矢印（開く）-google.maps.SymbolPath.CIRCLE
後方を指す矢印（開く）-google.maps.SymbolPath.CIRCLE

これらのシンボルには、path、fillColor、fillOpacity、scale、stokeColor、strokeOpacity、およびstrokeWeightというプロパティがあります。

例

次の例は、事前定義されたシンボルをGoogleマップに描画する方法を示しています。

<!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.433053, 78.412172),
               zoom:5
            }

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

            var marker = new google.maps.Marker({
               position: map.getCenter(),

               icon: {
                  path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
                  scale: 5,
                  strokeWeight:2,
                  strokeColor:"#B40404"
               },

               draggable:true,
               map: map,
            });
         }
      </script>

   </head>

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

</html>

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

シンボルのアニメーション化

マーカーと同様に、バウンスやドロップなどのアニメーションもシンボルに追加できます。

例

次の例は、地図上のマーカーとしてシンボルを使用し、それにアニメーションを追加する方法を示しています-

<!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.433053, 78.412172),
               zoom:5
            }

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

            var marker = new google.maps.Marker({
               position: map.getCenter(),

               icon: {
                  path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
                  scale: 5,
                  strokeWeight:2,
                  strokeColor:"#B40404"
               },

               animation:google.maps.Animation.DROP,
               draggable:true,
               map: map
            });
         }
      </script>

   </head>

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

</html>

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

Googleマップ-イベント

Google Maps JavaScriptプログラムは、ユーザーが生成したさまざまなイベントに応答できます。この章では、Googleマップを操作しながらイベント処理を実行する方法を示す例を示します。

イベントリスナーの追加

メソッド* addListener（）*を使用して、イベントリスナーを追加できます。リスナー、イベントの名前、ハンドラーイベントを追加するオブジェクト名などのパラメーターを受け入れます。

例

次の例は、イベントリスナーをマーカーオブジェクトに追加する方法を示しています。プログラムは、マーカーをダブルクリックするたびに、マップのズーム値を5ずつ上げます。

<!DOCTYPE html>
<html>

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

      <script>
         var myCenter = new google.maps.LatLng(17.433053, 78.412172);
         function loadMap(){

            var mapProp = {
               center: myCenter,
               zoom:5,
               mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

            var marker = new google.maps.Marker({
               position: myCenter,
               title:'Click to zoom'
            });

            marker.setMap(map);

           //Zoom to 7 when clicked on marker
            google.maps.event.addListener(marker,'click',function() {
               map.setZoom(9);
               map.setCenter(marker.getPosition());
            });
         }
      </script>

   </head>

   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>

</html>

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

クリック時に情報ウィンドウを開く

次のコードは、マーカーをクリックすると情報ウィンドウを開きます-

<!DOCTYPE html>
<html>

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

      <script>
         var myCenter = new google.maps.LatLng(17.433053, 78.412172);
         function loadMap(){

            var mapProp = {
               center:myCenter,
               zoom:4,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

            var marker = new google.maps.Marker({
               position:myCenter,
            });

            marker.setMap(map);

            var infowindow = new google.maps.InfoWindow({
               content:"Hi"
            });

            google.maps.event.addListener(marker, 'click', function() {
               infowindow.open(map,marker);
            });
         }
      </script>

   </head>

   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>

</html>

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

リスナーの削除

メソッド* removeListener（）*を使用して、既存のリスナーを削除できます。このメソッドはリスナーオブジェクトを受け入れるため、リスナーを変数に割り当ててこのメソッドに渡す必要があります。

例

次のコードは、リスナーを削除する方法を示しています-

<!DOCTYPE html>
<html>

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

      <script>
         var myCenter = new google.maps.LatLng(17.433053, 78.412172);
         function loadMap(){

            var mapProp = {
               center:myCenter,
               zoom:4,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

            var marker = new google.maps.Marker({
               position:myCenter,
            });

            marker.setMap(map);

            var infowindow = new google.maps.InfoWindow({
               content:"Hi"
            });

            var myListener = google.maps.event.addListener(marker, 'click', function() {
               infowindow.open(map,marker);
            });

            google.maps.event.removeListener(myListener);
         }
      </script>

   </head>

   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>

</html>

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

Google-maps-quick-guide

Googleマップ-はじめに

Googleマップとは何ですか？

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

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

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

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

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

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

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

例

Googleマップ-タイプ

地図の種類

構文

ロードマップ

衛星

ハイブリッド

地形

Googleマップ-ズーム

ズーム値を増やす/減らす

構文

例：ズーム6

例：ズーム10

Googleマップ-ローカリゼーション

地図のローカライズ

例

出力

Googleマップ-UIコントロール

デフォルトのコントロール

例

UIのデフォルトコントロールを無効にする

例

すべてのコントロールの有効化/無効化

例

制御オプション

例

位置決めの制御

例

Googleマップ-マーカー

シンプルマーカーの追加

例

マーカーのアニメーション化

例

マーカーのカスタマイズ

例

マーカーを削除する

例

Googleマップ-シェイプ

ポリライン

例

ポリゴン

例

長方形

例

サークル

例

Googleマップ-情報ウィンドウ

ウィンドウを追加する

例

Googleマップ-シンボル

シンボルを追加する

例

シンボルのアニメーション化

例

Googleマップ-イベント

イベントリスナーの追加

例

クリック時に情報ウィンドウを開く

リスナーの削除

例