Googleマップ API•jQuery

Colorboxを使ってポップアップでGoogle Maps（グーグルマップ）を表示させる方法

2021年7月13日 by single コメントはまだありません

わたしがColorboxが好きなのは、Google Maps（グーグルマップ）を、ポップアップで表示させることができるところです。

なお、Google Maps関連の記事についてはこちらにまとめてありますので、ご覧ください。

Colorboxを使ってポップアップでGoogle Maps（グーグルマップ）を表示させる方法

サンプル

地図を開く(IFrame)

地図を開く(Inline)

HTMLコード

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>ColorBox Sample1</title>
   <!-- 読み込むスタイルシート--><!-- パスは適時変更ください -->
   <link rel="stylesheet" href="/assets/colorbox-master/example1/colorbox.css" />
   <script defer
       src="https://maps.googleapis.com/maps/api/js?key=(APIキー)&callback=initMap" >
   </script>
   <!-- jQuery -->
   <script src="https://code.jquery.com/jquery.min.js"></script>
   <!--パスは適時変更ください -->
   <script src="/assets/colorbox-master/jquery.colorbox.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
         $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
         $(".inline").colorbox({inline:true, width:"80%", height:"80%"});
       });
   </script>
   <style type="text/css">
      #map_canvas {
         width: 100%;
         height:100%;
      }
      html,
      body {
         height: 100%;
         margin: 0;
         padding: 0;
      }
   </style>
   <script type="text/javascript">
      var map;
      var marker;
      function initMap() {
         var myLatlng = new google.maps.LatLng(35.68517826190777,139.7528236934712);
         var mapOptions = {
           zoom: 15,
           center: myLatlng
         }
         map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
         marker = new google.maps.Marker({
            position: myLatlng,
            map: map
         });
         var infowindow = new google.maps.InfoWindow({
            content: 'Inlineの地図',
            position: myLatlng
         });
         infowindow.open(map,marker);
      }
   </script>
</head>
<body>
      <p>
         <a class='iframe' href="https://www.single-life.tokyo/demo/MapSample001.html">地図を開く(IFrame)</a>
      </p>
      <p>
         <a class='inline' href="#map_canvas">地図を開く(Inline)</a>
      </p>
      <div style='display:none' >
         <div id="map_canvas" style="height:100%;width:100%;;margin:0;padding:0"></div>
      </div>
</body>
</html>

デモ

Colorboxを使ってGoogle Maps（グーグルマップ）を開く方法

Colorboxを読み込む

ポップアップの地図を導入するには、まず、Colorboxのライブラリを読み込む必要があります。

なお、Colorboxの導入方法は詳細は「Colorboxでギャラリーを作る方法」をご覧ください。

このサンプルでは「example1」のスタイルシートを利用します。

   <!-- 読み込むスタイルシート--><!-- パスは適時変更ください -->
   <link rel="stylesheet" href="/assets/colorbox-master/example1/colorbox.css" />

スタイルシートのファイルを読み込みます。

次にjQueryのライブラリを読み込みます。

   <!-- jQuery -->
   <script src="https://code.jquery.com/jquery.min.js"></script>

最後にColorboxのJSファイルを読み込みます。

   <!--パスは適時変更ください -->
   <script src="/assets/colorbox-master/jquery.colorbox.js"></script>

IFrameを使ったポップアップ地図を設定する

ポップアップの地図を作る方法として、IFrameとInline（ページ内で地図を作成する方法）とがあります。

まずはIFrameです。IFrameは別ページに地図（マップ）を設定して起き、クリックすることで、そのページを開く方法です。このデモは「https://www.single-life.tokyo/demo/MapSample001.html」をクリックすることで開くようにします。

リンク設定

まず、呼び出し元のリンクを準備します。

      <p>
         <a class='iframe' href="https://www.single-life.tokyo/demo/MapSample001.html">地図を開く(IFrame)</a>
      </p>

Colorbox設定

次に作成したリンクをColorboxの関数を呼び出すことで、ポップアップの設定を行います。

         $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});

jQueryのセレクタでクラス「frame」のオブジェクトを『iframe』で開くという構文になっています。

リンクをクリックするたびに、iframeのページを開く感じになり、毎回リフレッシュされます。

Inlineを使ったポップアップ地図を設定する

Iframeではなく、ページ内の設定された地図をポップアップ地図として表示させる方法です。

まず事前に地図を作成しておきます。

地図作成

   <script defer
       src="https://maps.googleapis.com/maps/api/js?key=(APIキー)&callback=initMap" >
   </script>

まず、Google MapsのAPIを読み込みます。

   <script type="text/javascript">
      var map;
      var marker;
      function initMap() {
         var myLatlng = new google.maps.LatLng(35.68517826190777,139.7528236934712);
         var mapOptions = {
           zoom: 15,
           center: myLatlng
         }
         map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
         marker = new google.maps.Marker({
            position: myLatlng,
            map: map
         });
         var infowindow = new google.maps.InfoWindow({
            content: 'Inlineの地図',
            position: myLatlng
         });
         infowindow.open(map,marker);
      }
   </script>

次に地図を作成します。

HTMLのコードでは非表示状態にしておきます。

      <div style='display:none' >
         <div id="map_canvas" style="height:100%;width:100%;;margin:0;padding:0"></div>
      </div>

リンク設定

地図を表示させるためのリンクを作成します。

      <p>
         <a class='inline' href="#map_canvas">地図を開く(Inline)</a>
      </p>

「href」には『#map_canvas』を設定し、クリックしたときにh「map_canvas」オブジェクトを開くという意味になります。

Colorbox設定

最後にColorboxの関数を呼び出し、パラメータのプロパティ「inline:true」とすることで、Inlineに設定された地図を開きます。

         $(".inline").colorbox({inline:true, width:"80%", height:"80%"});

Inlineの地図の場合、複数回、マップをクリックすると、前回の表示状態のまま、再表示されて、再表示ごとにリフレッシュはされません。リフレッシュするにはページを再読み込みする必要があります。

ご参考

関連ページ

jQuery 仕事の現場でサッと使える！ デザイン教科書 （Webデザイナー養成講座） [ 吉本集著 ]