GoogleMap API V3でマーカーの地点データを動的に読み込む

今回は、HTML内に持っていた地点データをJSONファイルに分離して、AJAXを使用してJSONファイルを読み込んでマーカーを設定します。
今回のサンプルでは、jQueryを使います。

処理イメージとしては、以下の感じです。

HTML読み込み
地図生成
地点データ読み込み（JSONファイル)
マーカーの設定

用意したJSONファイルは、以下のとおり

{
  "points":[
  {
    "title": "ローソン",
    "content":"ローソン 神戸中央西町",
    "lat":"34.687574",
    "lng":"135.189857"
  },
  {
    "title": "南京町広場",
    "content":"南京町広場",
    "lat":"34.6882",
    "lng":"135.188087"  
  },
  {
    "title": "ライオンズマンション",
    "content":"ライオンズマンション神戸栄町通",
    "lat":"34.687163",
    "lng":"135.187945"  
  }
  ]
}

まず、jQueryを読み込みます。今回は、独自にファイルを持たずにGoogle AJAX APIを使用して、Googleにあるファイルを使用します。

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script>
      google.load("jquery", "1.7.1");
    </script>

今までは、HTMLファイルで指定していたマーカーデータをajaxを使用して読み込み、地図に設定します。

  //jsonファイルの取得
  $.ajax({
    url: 'json/points.json',
    type: 'GET',
    dataType: 'json',
    timeout: 10000,
    error: function(){
      alert("地図データの読み込みに失敗しました");
    },
    success: function(json){
      //帰ってきた地点の数だけループ
      $.each(json.points,function(){
        markerArray.push({
          position: new google.maps.LatLng(this.lat,this.lng), 
          title: this.title,
          content:this.content
        });
      });
      
      // マーカーデータをセット
      if(markerArray){
        setMarkerData(markerArray);
      }      
    }
    
  });

以下のような地図になります。この３つのマーカーは動的に読み込んで表示しています。
f:id:pinoyuki:20120326011643p:plain