jquery Googlemap の利用

CATEGORY: jQuery | TAG:

2013年6月5日

Googlemap を利用する際のメモ。

2018年7月16日から「Google Maps Platform」という新しいサービスになり、API の使い方等が変更になりました。新しい API の使い方等については「Google Maps API の使い方」をご覧ください（2018年7月30日）

ジオコーディングを使って地図を表示

  • HTML に記述してある住所を元に地図を表示
  • マーカーにマウスオーバーすると HTML に記述してある場所の名前を表示
  • 情報ウィンドウ（マーカーをクリックすると表示される）には HTML に記述してある場所の名前と URL を元にしたリンクを表示

サンプル

関連リンク

Google Maps API の読み込み

センサーパラメータ「sensor=」はユーザーの位置情報を使用するかどうかを「true」または「false」で指定（必須）。

  1. <script  src="http://maps.google.com/maps/api/js?sensor=false"></script>

地図を表示する領域 <div id="map_canvas"></div> を記述しておく。

この div 要素の id は地図を生成する際に使用する。

HTML

  1. <div class="map_info">
  2.     <p class="venue">東京スカイツリー</p>
  3.     <p class="address">〒131-0045 東京都墨田区押上１−１−２</p>
  4.     <p class="web"><a href="http://www.tokyo-skytree.jp/" target="_blank">www.tokyo-skytree.jp</a></p>
  5. </div>
  6.     
  7. <div id="map_container">
  8.     <div id="map_canvas"></div>
  9. </div>

地図を表示する領域 <div id="map_canvas">には高さと幅を指定する

どこかで img 要素に対して max-width:100% を指定してあるとコントロールがうまく表示されないので max-width: none を指定

CSS

  1. #map_container {
  2.   clear: both;
  3.   width: 90%;
  4.   padding: 4px;
  5.   border: 1px solid #CCC;
  6. }
  7.  
  8. #map_container img {
  9.   max-width: none;
  10. }
  11.  
  12. #map_canvas {   /* 幅と高さを指定しないと地図は表示されない */
  13.   width: 100%;
  14.   height: 300px;
  15. }
  16.  
  17.  
  18. /* 情報ウィンドウ内 */
  19. #map_content{
  20.   width:250px;  
  21. }
  22.  
  23. #map_content p {
  24.   font-size: 12px;
  25. }
  26.  
  27. @media only screen and (min-width:  600px) { 
  28.   #map_canvas {
  29.     height: 350px;
  30.   }
  31. }
  32.  
  33. @media only screen and (min-width:  960px) { 
  34.   #map_canvas {
  35.     height: 400px;
  36.   }
  37. }

地図を表示する関数 initMap() を作成

  • _address : 表示する住所
  • _title : マーカーにマウスオーバー時と情報ウィンドウ（InfoWindow）に表示するタイトル
  • _url : 情報ウィンドウに表示するタイトルにつけるリンクのURL（_url の指定がなければリンクなし）

変数 map, map_center は関数の外でも使用するので、外で宣言

  1. <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
  2. <script  src="http://maps.google.com/maps/api/js?sensor=true"></script>
  3. <script>
  4. jQuery(function($){
  5.   var map, map_center;
  6.   function initMap(_address, _title, _url) {
  7.     
  8.     var opts = {  //オプションの設定
  9.       zoom: 16,  //初期のズーム レベル
  10.       mapTypeId: google.maps.MapTypeId.ROADMAP,  //初期マップ タイプ  
  11.       //その他のオプションの指定
  12.       mapTypeControl: true,
  13.       mapTypeControlOptions: {
  14.         style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
  15.       },
  16.       panControl: false,
  17.       zoomControl: true,
  18.       zoomControlOptions: {
  19.         style: google.maps.ZoomControlStyle.SMALL
  20.       },
  21.       scaleControl: true  
  22.     };
  23.  
  24.     //google.maps.Map オブジェクトを生成
  25.     //（表示する div 要素の id とオプションを指定）
  26.     map = new google.maps.Map(document.getElementById("map_canvas"), opts);
  27.     
  28.     //google.maps.Geocoder オブジェクトを生成
  29.     var geocoder = new google.maps.Geocoder();
  30.     
  31.     //Geocoder.geocode() メソッドでジオコーディングサービスへリクエスト 
  32.     geocoder.geocode( { 'address': _address}, function(results, status) {
  33.       if (status == google.maps.GeocoderStatus.OK) {
  34.         //中心の位置（ジオコーディングされた緯度と経度の値）
  35.         map_center = results[0].geometry.location;
  36.         //地図の中心を指定
  37.         map.setCenter(map_center);
  38.         //マーカーを生成
  39.         var marker = new google.maps.Marker({
  40.           //マーカーを配置する Map オブジェクトを指定
  41.           map: map,
  42.           //マーカーの初期の場所を指定  
  43.           position: map_center,  
  44.           //マーカーをアニメーションで表示（オプション）
  45.           animation: google.maps.Animation.DROP,  
  46.           //title にパラメータで渡される _title を指定
  47.           title:_title
  48.         });
  49.         
  50.         //情報ウィンドウのコンテンツ（_content）を作成
  51.         var _content = _title;
  52.         if (_url) {
  53.           _content = '<div id="map_content"><p><a href="' + _url + '" target="_blank"> ' + _title + '</a><br />' + _address + '</p></div>';
  54.         }else {
  55.           _content = '<div id="map_content"><p>' + _title + '<br />' + _address + '</p></div>';
  56.         }
  57.         //情報ウィンドウの生成
  58.         var infowindow = new google.maps.InfoWindow({
  59.           content: _content,
  60.         });
  61.         //marker をクリックすると情報ウィンドウを表示(リスナーの登録）
  62.         google.maps.event.addListener(marker, 'click', function() {  
  63.           infowindow.open(map,marker);
  64.         });
  65.         
  66.       } else {   //エラーの場合
  67.         alert("Geocode was not successful for the following reason: " + status);
  68.       }
  69.     });    
  70.   }
  71.   
  72.   //ロード時に initMap() で地図を表示
  73.   google.maps.event.addDomListener(window, 'load', initMap($('p.address').text(), $('p.venue').text(), $('p.web a').attr('href')));
  74.   
  75.   //リサイズイベントのリスナーを登録（中心位置を保持）
  76.   google.maps.event.addDomListener(window, 'resize', function(){
  77.     map.panTo(map_center);
  78.   });
  79. });
  80. </script>

リンクをクリックすると地図を表示させる

以下はリンクをクリックすると地図を表示させる関数 showMap() のパラメータ。

  • _address : 表示する住所
  • _title : マーカーにマウスオーバー時と情報ウィンドウ（InfoWindow）に表示するタイトル
  • _url : 情報ウィンドウに表示するタイトルにつけるリンクのURL（_url の指定がなければリンクなし）
  • _address、_title、_url の値から情報ウィンドウに表示する内容（_content）を生成する。
  • 情報ウィンドウの大きさの制御がうまくできないので、_content 内の div 要素などに対して CSS を適用して外見を整える。
  • _map_canvas : 地図を表示する div 要素の id （CSSで幅と高さを指定しておく）。指定しなければデフォルトは「map_canvas」
  1. jQuery(function($){
  2.  
  3.   function showMap(_address, _title, _url, _map_canvas) {
  4.     
  5.     var map_canvas = _map_canvas ? _map_canvas : "map_canvas";
  6.     var map_target = 'div#' + map_canvas;
  7.     $(map_target).fadeIn(800);  //fadeInで表示
  8.  
  9.     var opts = {
  10.       zoom: 15,  //初期のズーム レベル
  11.       mapTypeId: google.maps.MapTypeId.ROADMAP  //初期マップ タイプ
  12.     };
  13.     // <div id="map_canvas"> に地図を表示する map オブジェクトを生成
  14.     var map = new google.maps.Map(document.getElementById(map_canvas), opts);
  15.     
  16.     //google.maps.Geocoder オブジェクトを使用して Google Maps API ジオコーディング サービスにアクセス
  17.     var geocoder = new google.maps.Geocoder();
  18.     
  19.     //Geocoder.geocode() メソッドはジオコーディング サービスへのリクエストを開始 
  20.     geocoder.geocode( { 'address': _address}, function(results, status) {
  21.       if (status == google.maps.GeocoderStatus.OK) {
  22.         map.setCenter(results[0].geometry.location);
  23.         var marker = new google.maps.Marker({
  24.             map: map,  //マーカーを配置する Map オブジェクトを指定
  25.             position: results[0].geometry.location,  //マーカーの初期の場所を示す LatLng を指定
  26.             animation: google.maps.Animation.DROP,  //マーカーをアニメーションで表示
  27.             title:_title
  28.         });
  29.         
  30.         var _content = _title;
  31.         if (_url) {
  32.           _content = '<div id="map_content"><p><a href="' + _url + '" target="_blank"> ' + _title + '</a><br />' + _address + '</p></div>';
  33.         }else {
  34.           _content = '<div id="map_content"><p>' + _title + '<br />' + _address + '</p></div>';
  35.         }
  36.         
  37.         var infowindow = new google.maps.InfoWindow({
  38.           content: _content,
  39.           //size: new google.maps.Size(300,300),（情報ウィンドウのサイズはうまく指定できない）
  40.           //maxWidth: 300（情報ウィンドウのサイズはうまく指定できない）
  41.         });
  42.         //infowindow.open(map,marker);  最初から情報ウィンドウを表示する場合はコメントアウトを外す
  43.         google.maps.event.addListener(marker, 'click', function() {  //marker をクリックすると情報ウィンドウを表示(リスナーの登録）
  44.           infowindow.open(map,marker);
  45.         });
  46.         
  47.       } else {
  48.         alert("Geocode was not successful for the following reason: " + status);
  49.       }
  50.     });    
  51.   }
  52. });

HTML の記述部分（抜粋）

  • クラス名を元に jQuery でその内容を取得して地図を表示する。
  • 最初は非表示で「地図を表示」をクリックすると表示。
  • 地図の上部には「閉じる」ボタンを配置
  1. <p class="venue">場所の名前</p>
  2. <p class="address">住所（実際の住所を記述）</p>
  3. <p class="web"><a href="http://example.com" target="_blank">ウェブサイト名</a></p>
  4. <p class="show_map"><a href="#">地図を表示</a></p>
  5.  
  6. <div id="map_container">
  7. <div id="close"><p><a href="#">閉じる</a></p></div>
  8. <div id="map_canvas"></div>
  9. </div><!-- end of #map_container -->
  10. </div><!-- end of #content -->

地図を表示する部分の CSS の記述部分。

  1. div#map_container {
  2.   clear: both;
  3.   width: 500px;
  4.   height: 390px;
  5.   display: none;   /* 最初は非表示 */
  6. }
  7.  
  8. div#map_canvas {   /* 幅と高さを指定しないと地図は表示されない */
  9.   width: 500px;
  10.   height: 350px;
  11.   display: none;   /* 最初は非表示 */
  12. }
  13.  
  14. div#map_container div#close {
  15.   width: 500px;
  16.   height: 2em;
  17.   background: #999;
  18. }
  19.  
  20. div#map_container div#close p {
  21.   font-size: 12px; font-size: 1.2rem;
  22.   float: right;
  23.   padding-right: 20px;  
  24.   line-height: 2em;  
  25. }
  26.  
  27. div#map_container div#close p a {
  28.   color: #FFF;
  29.   background: url(images/close-trans.png) no-repeat left center;
  30.   padding-left: 20px;
  31. }
  32.  
  33. div#map_container div#close p a:hover {
  34.   color: #FCF;
  35. }
  36.  
  37. /* 情報ウィンドウ内 */
  38. #map_content{
  39.   width: 250px;  
  40. }
  41.  
  42. #map_content p {
  43.   font-size: 11px; font-size: 1.1rem;
  44. }
  45.  
  46. #map_content p a{
  47.   color: #66C;
  48. }

地図を表示する jQuery の記述。

  • 「地図を表示」をクリックすると、地図を囲む部分がスライドダウンで表示される。
  • その際、地図を囲む部分（div#map_container）には高さが指定されていないとスムーズにスライドダウンされない。
  • ‘p.address’から住所の情報を取得しその値を変数 address に格納
  • ‘p.web’に情報があれば、その中の a 要素の href 属性の値を変数 url に格納
  • address、url、’p.venue’の内容テキストを地図を表示する関数 showMap のパラメータとして実行
  • クリックしてもその他に何も起こらないように return false; を記述
  • 「閉じる」をクリックすると、地図がスライドアップされ、非表示になる。
  • また、再度表示するときもフェードインで表示するために、CSS を非表示に。
  1. $('p.show_map a').click(function() {
  2.     $('div#map_container').slideDown(1000);
  3.     var address = $('p.address').text();
  4.     var my_reg = /〒\s?\d{3}(-|ー)\d{4}/;
  5.     //郵便番号を含めるとおかしくなる場合があったので、郵便番号は削除
  6.     address = address.replace(my_reg, '');
  7.     if($('p.web').text() != '') {var url = $('p.web a').attr('href');}
  8.     showMap(address, $('p.venue').text(), url);
  9.     return false;
  10.   });
  11.   $('div#close p a').click(function() {
  12.     $('div#map_container').slideUp(500);
  13.     $('div#map_container div#map_canvas').css('display', 'none');
  14.     return false;
  15.   });