Googleマップをカスタマイズする方法。(吹き出し編)

googlemap

前回マーカー表示にチャレンジしましたが、今回は吹き出し表示にチャレンジします。

CSSの記述(前回から変更なし)

カスタムCSSに下記コードを記述します。
”mapSample”地図が表示されます。

#mapSample{
    width: auto;
    height: 400px;
}

HTMLの記述

地図の配置(前回から変更なし)

<div id="mapSample"></div>

関数の配置

今回地図のカスタマイズ情報[Style]設定なしで作成します。

<script>
var map;
var marker;
var infoWindow;
var center = {
  lat: 35.570231, // 緯度
  lng: 135.191836 // 経度
};
function initMap() {
  map = new google.maps.Map(document.getElementById('mapSample'), {
    center: center, // 地図の中心を指定
    zoom: 14// 地図のズームを指定
  });
  const image = 'faitjit-Logo.png';
  marker = new google.maps.Marker({ // マーカーの追加
      position: center, // マーカーを立てる位置を指定
      map: map // マーカーを立てる地図を指定
      icon: image
   });
 infoWindow = new google.maps.InfoWindow({ // 吹き出しの追加
     content: '<div class="mapSample">故郷</div>' // 吹き出しに表示する内容
  });
 marker.addListener('click', function() { // マーカーをクリックしたとき
     infoWindow.open(map, marker); // 吹き出しの表示
    });
}
</script>

MAP API呼び出しコードの記述

<script src="https://maps.googleapis.com/maps/api/js?key=実際のキーを記述;callback=initMap"></script>

地図にマーカーを吹き出し表示したしたMAP

マーカーをクリックすると吹き出しが表示されます。

実際に張り付けたMAP

コメント