Googlemap の利用

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」で指定（必須）。

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

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

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

HTML

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

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

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

CSS

#map_container {
  clear: both;
  width: 90%;
  padding: 4px;
  border: 1px solid #CCC;
}

#map_container img {
  max-width: none;
}

#map_canvas {   /* 幅と高さを指定しないと地図は表示されない */
  width: 100%;
  height: 300px;
}


/* 情報ウィンドウ内 */
#map_content{
  width:250px;  
}

#map_content p {
  font-size: 12px;
}

@media only screen and (min-width:  600px) { 
  #map_canvas {
    height: 350px;
  }
}

@media only screen and (min-width:  960px) { 
  #map_canvas {
    height: 400px;
  }
}

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

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

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

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<script  src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script>
jQuery(function($){
  var map, map_center;
  function initMap(_address, _title, _url) {
    
    var opts = {  //オプションの設定
      zoom: 16,  //初期のズーム レベル
      mapTypeId: google.maps.MapTypeId.ROADMAP,  //初期マップ タイプ  
      //その他のオプションの指定
      mapTypeControl: true,
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
      },
      panControl: false,
      zoomControl: true,
      zoomControlOptions: {
        style: google.maps.ZoomControlStyle.SMALL
      },
      scaleControl: true  
    };

    //google.maps.Map オブジェクトを生成
    //（表示する div 要素の id とオプションを指定）
    map = new google.maps.Map(document.getElementById("map_canvas"), opts);
    
    //google.maps.Geocoder オブジェクトを生成
    var geocoder = new google.maps.Geocoder();
    
    //Geocoder.geocode() メソッドでジオコーディングサービスへリクエスト 
    geocoder.geocode( { 'address': _address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        //中心の位置（ジオコーディングされた緯度と経度の値）
        map_center = results[0].geometry.location;
        //地図の中心を指定
        map.setCenter(map_center);
        //マーカーを生成
        var marker = new google.maps.Marker({
          //マーカーを配置する Map オブジェクトを指定
          map: map,
          //マーカーの初期の場所を指定  
          position: map_center,  
          //マーカーをアニメーションで表示（オプション）
          animation: google.maps.Animation.DROP,  
          //title にパラメータで渡される _title を指定
          title:_title
        });
        
        //情報ウィンドウのコンテンツ（_content）を作成
        var _content = _title;
        if (_url) {
          _content = '<div id="map_content"><p><a href="' + _url + '" target="_blank"> ' + _title + '</a><br />' + _address + '</p></div>';
        }else {
          _content = '<div id="map_content"><p>' + _title + '<br />' + _address + '</p></div>';
        }
        //情報ウィンドウの生成
        var infowindow = new google.maps.InfoWindow({
          content: _content,
        });
        //marker をクリックすると情報ウィンドウを表示(リスナーの登録）
        google.maps.event.addListener(marker, 'click', function() {  
          infowindow.open(map,marker);
        });
        
      } else {   //エラーの場合
        alert("Geocode was not successful for the following reason: " + status);
      }
    });    
  }
  
  //ロード時に initMap() で地図を表示
  google.maps.event.addDomListener(window, 'load', initMap($('p.address').text(), $('p.venue').text(), $('p.web a').attr('href')));
  
  //リサイズイベントのリスナーを登録（中心位置を保持）
  google.maps.event.addDomListener(window, 'resize', function(){
    map.panTo(map_center);
  });
});
</script>

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

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

_address : 表示する住所
_title : マーカーにマウスオーバー時と情報ウィンドウ（InfoWindow）に表示するタイトル
_url : 情報ウィンドウに表示するタイトルにつけるリンクのURL（_url の指定がなければリンクなし）
_address、_title、_url の値から情報ウィンドウに表示する内容（_content）を生成する。
情報ウィンドウの大きさの制御がうまくできないので、_content 内の div 要素などに対して CSS を適用して外見を整える。
_map_canvas : 地図を表示する div 要素の id （CSSで幅と高さを指定しておく）。指定しなければデフォルトは「map_canvas」

jQuery(function($){

  function showMap(_address, _title, _url, _map_canvas) {
    
    var map_canvas = _map_canvas ? _map_canvas : "map_canvas";
    var map_target = 'div#' + map_canvas;
    $(map_target).fadeIn(800);  //fadeInで表示

    var opts = {
      zoom: 15,  //初期のズーム レベル
      mapTypeId: google.maps.MapTypeId.ROADMAP  //初期マップ タイプ
    };
    // <div id="map_canvas"> に地図を表示する map オブジェクトを生成
    var map = new google.maps.Map(document.getElementById(map_canvas), opts);
    
    //google.maps.Geocoder オブジェクトを使用して Google Maps API ジオコーディング サービスにアクセス
    var geocoder = new google.maps.Geocoder();
    
    //Geocoder.geocode() メソッドはジオコーディング サービスへのリクエストを開始 
    geocoder.geocode( { 'address': _address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,  //マーカーを配置する Map オブジェクトを指定
            position: results[0].geometry.location,  //マーカーの初期の場所を示す LatLng を指定
            animation: google.maps.Animation.DROP,  //マーカーをアニメーションで表示
            title:_title
        });
        
        var _content = _title;
        if (_url) {
          _content = '<div id="map_content"><p><a href="' + _url + '" target="_blank"> ' + _title + '</a><br />' + _address + '</p></div>';
        }else {
          _content = '<div id="map_content"><p>' + _title + '<br />' + _address + '</p></div>';
        }
        
        var infowindow = new google.maps.InfoWindow({
          content: _content,
          //size: new google.maps.Size(300,300),（情報ウィンドウのサイズはうまく指定できない）
          //maxWidth: 300（情報ウィンドウのサイズはうまく指定できない）
        });
        //infowindow.open(map,marker);  最初から情報ウィンドウを表示する場合はコメントアウトを外す
        google.maps.event.addListener(marker, 'click', function() {  //marker をクリックすると情報ウィンドウを表示(リスナーの登録）
          infowindow.open(map,marker);
        });
        
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });    
  }
});

HTML の記述部分（抜粋）

クラス名を元に jQuery でその内容を取得して地図を表示する。
最初は非表示で「地図を表示」をクリックすると表示。
地図の上部には「閉じる」ボタンを配置

<p class="venue">場所の名前</p>
<p class="address">住所（実際の住所を記述）</p>
<p class="web"><a href="http://example.com" target="_blank">ウェブサイト名</a></p>
<p class="show_map"><a href="#">地図を表示</a></p>

<div id="map_container">
<div id="close"><p><a href="#">閉じる</a></p></div>
<div id="map_canvas"></div>
</div><!-- end of #map_container -->
</div><!-- end of #content -->

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

div#map_container {
  clear: both;
  width: 500px;
  height: 390px;
  display: none;   /* 最初は非表示 */
}

div#map_canvas {   /* 幅と高さを指定しないと地図は表示されない */
  width: 500px;
  height: 350px;
  display: none;   /* 最初は非表示 */
}

div#map_container div#close {
  width: 500px;
  height: 2em;
  background: #999;
}

div#map_container div#close p {
  font-size: 12px; font-size: 1.2rem;
  float: right;
  padding-right: 20px;  
  line-height: 2em;  
}

div#map_container div#close p a {
  color: #FFF;
  background: url(images/close-trans.png) no-repeat left center;
  padding-left: 20px;
}

div#map_container div#close p a:hover {
  color: #FCF;
}

/* 情報ウィンドウ内 */
#map_content{
  width: 250px;  
}

#map_content p {
  font-size: 11px; font-size: 1.1rem;
}

#map_content p a{
  color: #66C;
}

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

「地図を表示」をクリックすると、地図を囲む部分がスライドダウンで表示される。
その際、地図を囲む部分（div#map_container）には高さが指定されていないとスムーズにスライドダウンされない。
‘p.address’から住所の情報を取得しその値を変数 address に格納
‘p.web’に情報があれば、その中の a 要素の href 属性の値を変数 url に格納
address、url、’p.venue’の内容テキストを地図を表示する関数 showMap のパラメータとして実行
クリックしてもその他に何も起こらないように return false; を記述
「閉じる」をクリックすると、地図がスライドアップされ、非表示になる。
また、再度表示するときもフェードインで表示するために、CSS を非表示に。

$('p.show_map a').click(function() {
    $('div#map_container').slideDown(1000);
    var address = $('p.address').text();
    var my_reg = /〒\s?\d{3}(-|ー)\d{4}/;
    //郵便番号を含めるとおかしくなる場合があったので、郵便番号は削除
    address = address.replace(my_reg, '');
    if($('p.web').text() != '') {var url = $('p.web a').attr('href');}
    showMap(address, $('p.venue').text(), url);
    return false;
  });
  $('div#close p a').click(function() {
    $('div#map_container').slideUp(500);
    $('div#map_container div#map_canvas').css('display', 'none');
    return false;
  });

Web Design Leaves