Let's make something

PHPやJavaScriptを学びながら、サイトを作ってみようと思う今日この頃

GoogleMap API V3で複数のマーカーを表示吹き出しは1つだけにする

お店を紹介するサイトを作ろうということで、複数のお店の位置情報を1つのマップで表示するために、
GoogleMapで複数のマーカーを1つの地図に表示する方法を調べました。

また、マーカーをクリックすると吹き出しが表示されますが、複数の吹き出しを表示せずに同時に表示する吹き出しは1つとします。
使用するGoogleMap APIはV3です。

JSDocの書き方がよくわかっていないので、コメントの書き方が間違っているかもしれません。


f:id:pinoyuki:20120317005716p:plain

まずは、HTMLファイル

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
    </script>
    <script src="./js/gmap.js" type="text/javascript"></script>
    <script type="text/javascript">
      function initialize(id){
        gmap_initialize(id);

        var data = new Array();
        data.push({position: new google.maps.LatLng(34.687574,135.189857), title: 'ローソン', content: 'ローソン 神戸中央西町 <br/><a href=\'http://www.lawson.co.jp/\'>HP</a>'});
        data.push({position: new google.maps.LatLng(34.6882,135.188087), title: '南京町広場', content: '南京町広場'});
  
        setMarkerData(data);
      }
    </script>
    <title>GoogleMapTest1</title>
  </head>
  <body onload="initialize('gmap_canvas')">
    <div id="gmap_canvas" style="width: 480px; height: 320px;"></div>
  </body>
</html>
  1. 最初のscriptタグで、GoogleMap APIを読み込みます。
  2. 2つ目のscriptタグで、自作したGoogleMap用のJavaScriptを読み込みます。
  3. 3つ目のscriptタグで、GoogleMapの初期化とマーカーデータを作成してマーカーを地図に設定します。
  4. bodyタグ内に実際にGoogleMapを表示する領域(div id:gmap_canvas)を作成します。

次にJavaScript

/**
 * 開始ズームサイズ
 * @type Number
 */
var START_ZOOM = 16;

/**
 * 開始中心位置
 * @type google.maps.LatLng
 */
var START_CENTER = new google.maps.LatLng(34.687463, 135.18813);

/**
 * GoogleMapオブジェクト
 * @type google.maps.Map
 */
var gmap;

/**
 * 現在開いている情報ウィンドウ
 * @type google.maps.InfoWindow
 */
var openInfoWindow; 

/**
 * GoogleMapの初期処理
 * @param {String} id GoogleMap表示領域ID
 */
function gmap_initialize(id) {
  /**
   * 地図オプション
   * @param Object
   */
  var mapOption = {
    zoom: START_ZOOM,
    center:START_CENTER,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    navigationControlOptions: {
      style: google.maps.NavigationControlStyle.DEFAULT
    }
  };
  gmap = new google.maps.Map(document.getElementById(id), mapOption);
}

/**
 * マーカーデータのセット
 * @param {Object}   マーカーデータ
 */
function setMarkerData(makerArray) {

  // 登録データ分のマーカーを作成
  for (var i = 0; i < makerArray.length; i++) {
    var markerData = makerArray[i];
    var marker = new google.maps.Marker({
      position: markerData.position,
      title: markerData.title,
      map: gmap
    });

    // マーカーのclickリスナー登録
    setMarkerClickListener(marker, markerData);
  }
}

/**
 * マーカーのクリックイベントリスナーの登録
 * @param {google.maps.Marker} marker マーカーオブジェクト
 * @param {Object} markerData マーカーに設定する情報ウィンドウデータ
 */
function setMarkerClickListener(marker, markerData) {
  // マーカークリック時に情報ウィンドウを開く。
  // すでに開いているウィンドウがある場合は、閉じてから開く。
  google.maps.event.addListener(marker, 'click', function(event) {
    if (openInfoWindow) {
      openInfoWindow.close();
    }
    openInfoWindow = new google.maps.InfoWindow({
      content: markerData.content
    });
    google.maps.event.addListener(openInfoWindow,'closeclick',function(){
      openInfoWindow = null;
    })
    openInfoWindow.open(marker.getMap(), marker);
  });
}

}
  1. まず、最初に地図を表示する場合の中心位置とズームサイズを設定します。
  2. gmap_initialize関数では地図オブジェクトを作ります。
  3. setMarkerData関数では、データ数分のマーカーオブジェクトを作成し、クリックイベントリスナーを登録します。setMarkerClickListenerが実際の登録処理です。

これで、1つの地図に複数データが表示できるようになりました。


参考: