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-maps-shapes

Googleマップ-シェイプ

ポリライン

例

ポリゴン

例

長方形

例

サークル

例

目次