Let's make something

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

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

前回の記事で書いたコードは、グローバル変数を使っていたのですが、よくないことらしいので書き直しました。

こんな感じでいいのかな？

こっちが、JavaScript

/**
 * GoogleMapの表示
 * @param {String} id 表示領域ID
 * @param {Object} option google.maps.Mapに設定するオプション
 * @param {Object} markerArray マーカーデータ配列
 */
var viewGoogleMap = function(id, option, markerArray){
  /**
   * マーカーのクリックイベントリスナーの登録
   * @param {google.maps.Marker} marker マーカーオブジェクト
   * @param {Object} markerData マーカーに設定する情報ウィンドウデータ
   */
  var setMarkerClickListener = function(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);
    });
  };
  
  /**
   * マーカーデータのセット
   * @param {Object} makerArray マーカーデータ
   */
  var setMarkerData = function(makerArray) {

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

      // マーカーのclickリスナー登録
      setMarkerClickListener(marker, makerArray[i]);
    }
  }; 
  
  option = option ? option : {};
  if(id == null){
    return;
  }
  var mapOption = {
    zoom: option.zoom || 16,
    center:option.center || new google.maps.LatLng(34.687463, 135.18813),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    navigationControlOptions: {
      style: google.maps.NavigationControlStyle.DEFAULT
    }
  };
  
  var gmap = new google.maps.Map(document.getElementById(id), mapOption);

  var openInfoWindow;  
  
  if(markerArray){
    setMarkerData(markerArray);
  }
}

こっちが、html

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
    </script>
    <script type="text/javascript">

      function 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: '南京町広場'});

        var map = viewGoogleMap(id,null,data);
      }
    </script>
    <script src="./js/gmap.js" type="text/javascript"></script>
    <title>GoogleMapTest1</title>
  </head>
  <body onload="initialize('gmap_canvas')">
    <div id="gmap_canvas" style="width: 480px; height: 320px;"></div>
  </body>
</html>

それにしても、JavaScriptは書き方に自由度がありすぎてどういう風に書けばよいのかよくわからない。
色々なサンプルソースを見ても、まだどれがよい書き方なのかの判断もできないので、難しい。