Googleマップapi v3 +マーカークラスタラー：センタリングマップ？

Question

私のウェブサイトでgoogle maps api v3（マーカークラスタラー付き）を使用しようとしたときに問題が発生しました。これは、私は、この時点で抱えている出力されます：

http://imageshack.us/photo/my-images/710/mapproblem.png/

EDITED：初めて私は、ポスト内の画像を使用している、と私はそれを直接投稿できるように見えることはできませんので、私は掲示代わりにリンク。申し訳ありません。

あなたが見ることができるように、何のアライメントは全て

でもありません。これは、コードの重要な部分である：

show_map.js

function showMap(json_items) { 

     var geocoder = new google.maps.Geocoder(); 
     var latlng; 
     geocoder.geocode({'address':json_items[0]}, function(results,status){ 
      latlng = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()); 
     }); 

     var markers = [] 
     var markoptions = { 
      maxZoom : 10, 
      gridSize : 50 
     } 
     var bounded = new google.maps.LatLngBounds(); 

     var options = { 
      'mapTypeId': google.maps.MapTypeId.ROADMAP, 
      'center': latlng 
     }; 

     var map = new google.maps.Map(document.getElementById("big_map"), options); 
     if(document.getElementById("big_map")){ 

      for (var i=1; i<10; i++){ 
       geocoder.geocode({'address': json_items[i]}, function(results, status){ 
        var marker = new google.maps.Marker({position: results[0].geometry.location, map:map}); 
        markers.push(marker); 

       }); 
       bounded.extend(results[0].geometry.location); 
       map.fitBounds(bounded); 

      } 

      var markerCluster = new MarkerClusterer(map, markers, markoptions); 
      //map.fitBounds(markerCluster.getExtendedBounds(bounded)); 
     } 
} 

のmain.css

/*Big google map*/ 
#big-map { 
    border: solid 1px #afafaf; 
    background: #fff; 
    margin-bottom: 15px; 
    display: none; 
} 

#big-map .title { 
    border-bottom: solid 1px #afafaf; 
    background: #ebebeb; 
    height: 32px; 
    line-height: 32px; 
    font-size: 14px; 
    font-weight: bold; 
    margin: 0; 
    padding: 0 10px; 
} 

#big-map #big_map { 
     padding: 0; 
     margin: 0; 
     position: relative; 
     z-index: 3; 
     width: 948px; 
     height: 280px; 
} 

、最後にテンプレート：

<div class="grid_24"> 
     <div id="big-map"> 
      <h2 class="title">Map</h2> 
      <div id="big_map"></div> <!-- this is where the actual map should spanw --> 
      <a class="link" href="#">Reduce map</a> 
     </div> 
     <div class="clear"></div>  
</div> 
<div class="clear"></div> 

私は実際にどこでエラー/間違ったスタイルやものがあるかをチェックするはずです。参考ページとチュートリアルに続いて、私はすべてのことを正しくやっているようです（私はmarkerclustererとlatlngboundsの間の最終的な衝突についてはわかりません）。

ありがとうございました！

Answer 1

$ .goMapを使用してみましたか？それは偉大なjQueryプラグインだし、マーカーのクラスタリングのための本当に簡単な方法があります。

http://www.pittss.lv/jquery/gomap/solutions/markerclusterer.html