Tarokenlog

Contact

GoogleMapのInfoWindowのカスタマイズ方法

グーグルマップの情報ウィンドウ(InfoWindow)をいじりたい人向けです。(備忘録です)
基本的にいじり方は一緒だと思うので流れを理解すれば簡単にいじれます。

ここでは閉じボタンも変えたかったのでFont Awesomeのアイコンを導入してみました。

では参ります(･ω･)/


GoogleMapのInfowindowのカスタマイズ

Googleマップの表示方法はここではあまり説明しません。

まずGoogleMapを表示

GoogleMap Apiなどで調べるとマップの表示方法や情報ウィンドウの表示方法がすぐ出てきますので、それを見て導入してください。
こちら→スタートガイド
こちらも→情報ウィンドウ

この二つで情報ウィンドウまで表示できます。
＊Apiのキーを取得してください。

２つ目のリンクで情報ウィンドウも表示できたかと思います。

内容がUruluだし長いので少し変えました。
＊idやclassなどは変えていません。


    function initMap() {
      var tokyo = {lat: 35.681298, lng: 139.766247};
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 4,
        center: tokyo
      });

      var contentString = '<div id="content">'+
          '<h1 id="firstHeading" class="firstHeading">Tokyoだべ</h1>'+
          '<div id="bodyContent">'+
          '<p><b>Tokyo</b>は人多いよ〜</p>'+
          '<p>詳細はこちら: <a href="">'+
          'リンクをペッ</a> '+
          '</p>'+
          '</div>'+
          '</div>';

      var infowindow = new google.maps.InfoWindow({
        content: contentString
      });

      var marker = new google.maps.Marker({
        position: tokyo,
        map: map,
        title: 'Tokyo'
      });
      marker.addListener('click', function() {
        infowindow.open(map, marker);
      });
    }

UruluをTokyoにしてcontentの中身を減らしただけです。
こんな感じになるかと思います。

情報ウィンドウをいじる

情報ウィンドウとして勝手に出てくるやつをjavascript(jquery)で強制的にいじいじします。

まず最初にjqueryのCDNを導入します。
Jquery CDN
これをしないと、「$ is not defined」と怒られます。

情報ウィンドウのスタイリングのコードを書いていきます。
以下をclick functionの中に入れます。


        // ここでinfoWindowのスタイリング
      var iwOuter = $('.gm-style-iw');
      // prevで直前の兄弟要素を取得
      var iwBackground = iwOuter.prev();
      // nextで直後の兄弟要素を取得
      var iwCloseBtn = iwOuter.next();
      // 背景のshadowを消す
      iwBackground.children(':nth-child(2)').css("display", "none");
      // 白い背景を消す
      iwBackground.children(':nth-child(4)').css("display", "none");
      // 下のとんがりコーンの影を消す
      iwBackground.children(':nth-child(1)').css("display", "none");
      // なんかまだとんがりコーンの影がしつこく出てくるからここで消す(左の影)
      iwBackground.children(':nth-child(3)').children(':nth-child(1)').children(':nth-child(1)').css("box-shadow", "none");
      // なんかまだとんがりコーンの影がしつこく出てくるからここで消す(右の影)
      iwBackground.children(':nth-child(3)').children(':nth-child(2)').children(':nth-child(1)').css("box-shadow", "none");
      // ここでcssいじるのめんどいからクラスをつける
      iwCloseBtn.addClass("closebtn");
      // fontawesomeのcloseボタンを追加
      iwCloseBtn.prepend('<i class="fa fa-times-circle" aria-hidden="true"></i>');

コメントで何をしているのか書いています。
影などを消さなくて良い方は省いて構いません。
必要に応じて変更してみてください。

font awesome導入

デフォルトの閉じボタンで良いなら別にしなくてオッケーですが、今回は導入しました。
＊なぜかうまく表示されなかったので、、、

Font Awesome
Font Awesome CDN

どちらでも好きな方をどうぞ。

＊Font Awesome Animationを使うとホバーで閉じボタンがクネクネ動くようにできます。

Font Awesome Animationの使い方

fontawesomeの便利なアニメーションを使ってみました。超簡単で色んなアニメーションをアイコンに付けれるので是非使ってみてください。

CSSでスタイリング

あまり使いたくないですが、!importantを使わないと優先順位で勝てずに反映されないので我慢して使いました。
こんな感じです。



/* infowindowのCSS */
.gm-style-iw {
   width: 250px !important;
   top: 15px !important;
   left: 0 !important;
   background-color: #fff;
   border-radius: 2px 2px 0 0;
}

#content {
	width: 250px;
}

.firstHeading {
	background-color: #4285F4;
}

.firstHeading {
	color: #fff;
	margin: 0;
	padding: 10px;
}

#bodyContent {
	padding: 10px;
	font-size: 16px;
}

/* 閉じるボタンのCSS */
.closebtn {
	width: 30px!important;
    height: 30px!important;
    opacity: 1!important;
    right: 35px!important;
    top: 0!important;
}

/* デフォルトの閉じるボタンを消す */
.closebtn img {
	display: none;
}
/* fontawesomeで閉じるボタンを作る */
.fa-times-circle {
	padding: 0;
	font-size: 28px!important;
	color: #000099;
}

/* PC対応 */
@media only screen and (min-width: 1200px) {
.gm-style-iw {
   width: 300px !important;
}
#content {
	width: 300px;
}
}

モバイル優先でコードを書いています。
一番下にPC表示でのCSSがあります。

表示幅が変わると、.gm-style-iwの幅も勝手に変わるのでそれに合わせてCSSでレスポンシブ対応させましょう。

こんな感じになるかと思います。

Chromeで検証をすると以下のように、どのタグにどんなCSSが効いているかすぐにわかります。

これでいじいじしてみてくださいませ。

まとめるとこんな感じ

全部のコード


<!DOCTYPE html>
<html>
  <head>
    <title>test Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <!-- 独自CSS -->
    <link rel="stylesheet" type="text/css" href="style.css">
    <!-- fontawesome -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
    function initMap() {
      var tokyo = {lat: 35.681298, lng: 139.766247};
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 4,
        center: tokyo
      });

      var contentString = '<div id="content">'+
          '<h1 id="firstHeading" class="firstHeading">Tokyoだべ</h1>'+
          '<div id="bodyContent">'+
          '<p><b>Tokyo</b>は人多いよ〜</p>'+
          '<p>詳細はこちら: <a href="">'+
          'リンクをペッ</a> '+
          '</p>'+
          '</div>'+
          '</div>';

      var infowindow = new google.maps.InfoWindow({
        content: contentString
      });

      var marker = new google.maps.Marker({
        position: tokyo,
        map: map,
        title: 'Tokyo'
      });
      marker.addListener('click', function() {
        infowindow.open(map, marker);

        // ここでinfoWindowのスタイリング
      var iwOuter = $('.gm-style-iw');
      // prevで直前の兄弟要素を取得
      var iwBackground = iwOuter.prev();
      // nextで直後の兄弟要素を取得
      var iwCloseBtn = iwOuter.next();
      // 背景のshadowを消す
      iwBackground.children(':nth-child(2)').css("display", "none");
      // 白い背景を消す
      iwBackground.children(':nth-child(4)').css("display", "none");
      // 下のとんがりコーンの影を消す
      iwBackground.children(':nth-child(1)').css("display", "none");
      // なんかまだとんがりコーンの影がしつこく出てくるからここで消す(左の影)
      iwBackground.children(':nth-child(3)').children(':nth-child(1)').children(':nth-child(1)').css("box-shadow", "none");
      // なんかまだとんがりコーンの影がしつこく出てくるからここで消す(右の影)
      iwBackground.children(':nth-child(3)').children(':nth-child(2)').children(':nth-child(1)').css("box-shadow", "none");
      // ここでcssいじるのめんどいからクラスをつける
      iwCloseBtn.addClass("closebtn");
      // fontawesomeのcloseボタンを追加
      iwCloseBtn.prepend('<i class="fa fa-times-circle" aria-hidden="true"></i>');
      });
    }
    </script>

    <!-- jquery読み込み -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <!-- googlemapapi読み込み -->
    <script src="https://maps.googleapis.com/maps/api/js?key=APIのキー&callback=initMap"
    async defer></script>
  </body>
</html>

＊APIキーとjquery、fontawesomeの読み込みを忘れずに(･ω･)/

CSS



/* infowindowのCSS */
.gm-style-iw {
   width: 250px !important;
   top: 15px !important;
   left: 0 !important;
   background-color: #fff;
   border-radius: 2px 2px 0 0;
}

#content {
	width: 250px;
}

.firstHeading {
	background-color: #4285F4;
}

.firstHeading {
	color: #fff;
	margin: 0;
	padding: 10px;
}

#bodyContent {
	padding: 10px;
	font-size: 16px;
}

/* 閉じるボタンのCSS */
.closebtn {
	width: 30px!important;
    height: 30px!important;
    opacity: 1!important;
    right: 35px!important;
    top: 0!important;
}

/* 閉じるボタンを消す */
.closebtn img {
	display: none;
}
/* fontawesomeで消すボタンを作る */
.fa-times-circle {
	padding: 0;
	font-size: 28px!important;
	color: #000099;
}

/* PC対応 */
@media only screen and (min-width: 1200px) {
.gm-style-iw {
   width: 300px !important;
}
#content {
	width: 300px;
}
}

こんな感じで情報ウィンドウをカスタマイズができます。
必要に応じてCSSなどをいじいじしてみてください(･ω･)/

以上です〜


Posted

in

,

Tags:

, ,