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

目次

Googleマップ-シンボル

シンボルを追加する

例

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

例