要素をクリックした後にGoogleマップv3を作成する

Question

要素をクリックした後にマップを作成します。私はGoogle Maps v3を使用しています。

私は、ページあたり15件の結果/プロパティを表示するRealtyリスティングページを持っています。 15個のマップを生成する代わりに、1つの要素をクリックすると1つのマップが作成されます。クリックされると、マップ生成プロセスが実行されます。マップcanvas/divは最初は非表示になっています。私はクリック要素とマップ要素の関係は、このようなものであろうと考えていた

：私はカスタムID、緯度などのプロパティに関する要素に属性を追加HTML5を使用して

<span id="12-1234" lat="10.101010" lng="-25.252525" class="view-map">View Map</span> 
... other markup ... 
<div id="12-1234-map" class="google-map"></div> 

と経度私はアイコンを変更してマップを中央に置くことができます。

私は、検索パラメータに基づいて動的に生成されたXMLファイルからマーカーをロードする機能マップを持っています。

私はaddListenerとaddDomListenerを見てきましたが、運が全くありませんでした。ほとんどの検索では、マーカーに関連する問題が取り上げられます。

私は、jQueryを使用していたことのようなうわさがありました。このような何か：あなたはカップル回以上、あなたがそれに別のクリックイベントをバインドしましたとして、それをクリックし、既にした後の地図を見る前の要素をクリックする必要があるだろうと明らかに

$('.view-map').click(function(){ 
    google.maps.event.addDomListener(this, 'click', initialize); 
    $("#" + this.id + "-map").toggle(); 
}); 

これは完璧ではなかったです。

私は何かが明らかに欠けているように感じる。

Answer 1

function initialize(link) { 
    var mapDiv = $('#' + link.attr('id') + '-map'); 
    mapDiv.toggle(); 

    var options = { 
    zoom: 10, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    center: new google.maps.LatLng(link.attr('lat'), link.attr('lng')) 
    }; 

    var map = new google.maps.Map(mapDiv[0], options); 
} 

$('.view-map').click(function(){ 
    initialize(this); 
}); 

Answer 2

あなたのビューマップのクリック機能では、地図の初期化メソッドを呼び出し、適切な値を渡します。この初期化関数は、マップdivを表示してからマップを適切に初期化することができます。

醜いとチェックしない例：

var params = { 
    lat : 47.5, 
    lng : -122.5 } 

$('.view-map').click(params, function(){ 
    params.id = this.id //e.g. 1234 
    initialize(params); 
    }); 

function initialize(params){ 
// show the 1234-map div, initialize the map 
}