GoogleMap Javascript のツールチップ

Leaflet Javascriptのツールチップがいい感じに出来たので、グレートサークルラインがかんたんなので、GoogleMapを使ってるアプリで同じようなこと出来ないか調べてみたところ、
Google語では、Labelのようで、調べて実装してみました。

ここで教えて頂きました。

公式ドキュメント(英語)

公式ドキュメント(日本語)

< コード例 >
マーカーのプロパティに label をセットします。


// 空港IATAラベル //
    let label = new google.maps.Marker({
      position: latlng,
      map: this.map,
      icon: {
        url: '',
        size: new google.maps.Size(1, 1),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(0, -12), // //左に0px、下に12px テキストはセンター
      },
      label: {
        text: this.poptxt,
        color: '#ffff00',
        fontFamily: 'sans-serif',
        fontWeight: 'bold',
        fontSize: '14px'
      }
    });

// 中央上ラベル //
          DrawMapG.nclabel = new google.maps.Marker({
            position: nclatlng,
            map: mapThis,
            icon: {
              url: '',
              size: new google.maps.Size(1, 1),
              origin: new google.maps.Point(0, 0),
              anchor: new google.maps.Point(0, -12), // //左に0px、下に12px テキストはセンター
            },
            label: {
              text: this.nctxt,
              color: '#ffffff',
              fontFamily: 'sans-serif',
              fontWeight: 'bold',
              fontSize: '14px'
            }
          });

         // 中央下ラベル //
          DrawMapG.sclabel = new google.maps.Marker({
            position: sclatlng,
            map: mapThis,
            icon: {
              url: '',
              size: new google.maps.Size(1, 1),
              origin: new google.maps.Point(0, 0),
              anchor: new google.maps.Point(0, 30), // //右に0px、上に30px テキストはセンター
            },
            label: {
              text: this.sctxt,
              color: '#ffffff',
              fontFamily: 'sans-serif',
              fontWeight: 'bold',
              fontSize: '14px'
            }
          });
 

< 画面例 >

コメントを残す