Googleマップ API•jQuery

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

2022年1月9日 by single コメントはまだありません

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

インストール方法

まず、「Magnific Popup」のインストール方法は以下の記事をご参照ください。

サンプル

地図

地図を開く（iframe:Maps Embed API)


HTMLコード

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
   <title>Magnific Popup Demo</title>
   <!-- Magnific Popup core CSS file -->
   <link rel="stylesheet" href="/assets/Magnific-Popup-master/dist/magnific-popup.css">
   <!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
   <!-- Magnific Popup core JS file -->
   <script src="/assets/Magnific-Popup-master/dist/jquery.magnific-popup.js"></script>
   <script defer
       src="https://maps.googleapis.com/maps/api/js?key=(APIキー)&callback=initMap" >
   </script>
   <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>
   <style type="text/css">
      .white-popup {
         position: relative;
         background: #FFF;
         padding: 20px;
         margin: 20px auto;
      }
   </style>
</head>
<body>
      <h4>地図</h4>
      <p>
         <a class="popup-gmaps" href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6481.417232265599!2d139.77018295065307!3d35.68417610762533!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1641704130877!5m2!1sja!2sjp">地図を開く（iframe:Maps Embed API)</a>
      </p>
      <p>
         <button id="showMap">地図を開く（inline:Maps JavaScript API)</button><br />
         <div id="map_canvas" style="width:50%;height:600px;" class="white-popup mfp-hide"></div>
         <!-- mfp-hideは初期表示時、非表示のためのクラス -->
      </p>
      <script type="text/javascript">
         $(document).ready(function() {
            // iframe（Maps Embed API）の場合
            $('.popup-gmaps').magnificPopup({
               disableOn: 700,
               type: 'iframe',
               mainClass: 'mfp-fade',
               removalDelay: 160,
               preloader: false,
               fixedContentPos: false
            });
            // inline（Maps JavaScript API）の場合
            $('button').magnificPopup({
              items: {
                  src: '#map_canvas',
                  type: 'inline'
              }
              ,closeBtnInside:false   /* ボタンを外に出す*/
            });
         });
   </script>
</body>
</html>

デモ

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

まず、「Iframe」形式で、ポップアップ地図を表示する方法です。

まず、EmbedマップのURLをリンクに設定してください。

<a class="popup-gmaps" href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6481.417232265599!2d139.77018295065307!3d35.68417610762533!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1641704130877!5m2!1sja!2sjp">地図を開く（iframe:Maps Embed API)</a>

次に、Content Typeのtypeで『iframe』を指定し、「Magnific Popup」を初期化してください。

            $('.popup-gmaps').magnificPopup({
               disableOn: 700,
               type: 'iframe',
               mainClass: 'mfp-fade',
               removalDelay: 160,
               preloader: false,
               fixedContentPos: false
            });

Embedマップの場合、これで実装できます。簡単ですね。

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

次に、Google Maps APIで生成したマップを「Inline」形式で、ポップアップ地図を表示する方法です。

まずは、Google Maps APIで地図を生成します。

地図作成

   <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>

ポップアップ地図生成

         <button id="showMap">地図を開く（inline:Maps JavaScript API)</button><br />
         <div id="map_canvas" style="width:50%;height:600px;" class="white-popup mfp-hide"></div>

そのままだと初期表示時に地図が表示されてしまうので、クラス「mfp-hide」を割り当ててください。

これによって、初期表示時、非表示になります。

また、地図とともに、地図を表示させるためのボタンも合わせて設定しておきます。

「Magnific Popup」 初期化

            // inline（Maps JavaScript API）の場合
            $('button').magnificPopup({
              items: {
                  src: '#map_canvas',
                  type: 'inline'
              }
              ,closeBtnInside:false   /* ボタンを外に出す*/
            });

ボタンオブジェクトに項目（item）を紐づけ、ターゲットを「#map_canvas」として、マップにして、かつ、typeを「inline」とすることで、ポップアップ地図を表示させることができます。

ご参考

関連ページ