🗺️

Google Maps APIでマップ上にテキストのみの要素を表示する

2021/08/07に公開

目的

Google Maps API(Maps JavaScript API)を使用してmap上にテキストのみの要素を表示する。

環境

  • Maps JavaScript API Version 3.45.7

概要

Markerのicon.urlをblankにして、label.textを設定すればテキストのみの要素を表示できる。
おそらくこれが最も簡単。

map上に単純にテキストだけを表示したいケースは意外と多いと思うが、紹介している記事が見当たらなかったのでシェア。

実装

sample.html
<!DOCTYPE html>
<html>
  <head>
    <title>Sample</title>
    <script src="./sample.js"></script>
  </head>
  <body>
    <div id="map" style="width:100vw; height:100vh;"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly" async></script>
  </body>
</html>
sample.js
function initMap() {
  const myLatLng = { lat: 36.500000, lng: 140.000000 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 6,
    center: myLatLng,
  });
  new google.maps.Marker({
    position: myLatLng,
    map,
    icon: {
      url: '',
      size: new google.maps.Size(1, 1)
    },
    label: {
      text: 'sample',
      color: '#ff0000',
      fontFamily: 'sans-serif',
      fontWeight: 'bold',
      fontSize: '20px'
    }
  });
}

実装ページのスクリーンショット

Discussion

ログインするとコメントできます