javascript - jQuery で要素 ID を変更した後、Google マップの読み込みに失敗する

Question

Google マップを div に読み込もうとしています。これらの DIV の数は不確定であり、それぞれに独立したマップをロードする必要があるため、DIV クラスの jQuery 検索を実行し、見つかった要素の ID を変更して一意にする必要がありました。これはうまくいきます。ただし、マップを各 DIV にロードしようとすると、ロードに失敗します。現状の私のコードは次のとおりです。

function gmapEditor(mapobj) {

    var mapdivid = jQuery(mapobj).attr("id");
    var mapopts = {
        center: new google.maps.LatLng(51.520707, -0.006866),
        zoom: 9,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false,
        zoomControl: false,
        panControl: false,
        streetViewControl: false,
        labels: true
    };

    initmap();

    console.log(mapdivid); // -> 'ell-gmap-kml-mapdiv-11740'
    console.log(mapobj);

    function initmap() {
        //jQuery(mapdivid)[0]
        gmap = new google.maps.Map(document.getElementById(mapdivid), mapopts);
        //gmap = new google.maps.Map(mapobj[0], mapopts);
        mapcenter = gmap.getCenter();
    }
}
jQuery(document).ready(function () {

    // Create array to hold map editor instances
    var maps = new Array();

    jQuery(".ell-gmap-kml-mapdiv").each(function (i) {
        // Add prefix to map div ID
        var newid = jQuery(this).attr("id") + '-' + jQuery(this).data("post_id");
        jQuery(this).attr("id", newid);

        // Instantiate new map editor object and add to array
        maps[i] = new gmapEditor(jQuery(this));
    });
});

（なぜコードのフォーマットが台無しになったのかわかりません）。ご覧のとおり、jQuery によって検出されたクラス「ell-gmap-kml-mapdiv」を使用して、DIV ごとに「gmapEditor」オブジェクトの独立したインスタンスを作成しています。

マップ DIV の ID を変更するコードをコメント アウトすると、マップが読み込まれます。問題は、各 DIV に固有の ID がなくなったため、すべてのマップが同じ設定になることです。

いくつかのコンソール ダンプを追加しました。ID 変更コードを再度有効にすると、「mapdivid」の期待値が得られます。興味深いことに、ログからも、多数のサブ要素が mapobj DIV に追加されていることがわかります。そのため、どこかで何かが機能しています。Maps API は、マップ DIV へのハンドルの取得に完全に失敗しているわけではありませんが、そこに何も表示することもできません。Safari で「要素の検査」を行うと、これらの余分な要素も表示されますが、実際のページではマップは表示されません。

何がうまくいかないのか、可能であればどうすれば修正できるかについての手がかりはありますか? 多分私はこれについて完全に間違った方法で進んでいます...

ちなみに、Mac の Safari、FireFox、Chrome で試しましたが、毎回同じ結果でした。

アドバイスをいただければ幸いです。

編集：

今働いています。以前に機能しなかった理由はわかりませんが、機能するコードは次のとおりです。

function gmapEditor(mapobj) {

var mapdivid = jQuery(mapobj).attr("id");   
var mapopts = {
        center: new google.maps.LatLng(51.520707, -0.006866),
        zoom: 9,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false,
        zoomControl: false,
        panControl: false,
        streetViewControl: false,
        labels: true
};

initmap();

console.log(mapdivid);
console.log(mapobj);

function initmap() {
    gmap = new google.maps.Map(mapobj[0], mapopts); 
    mapcenter = gmap.getCenter();
}   
}

jQuery(document).ready(function() {

// Create array to hold map editor instances
var maps = new Array();

jQuery(".ell-gmap-kml-mapdiv").each(function(i) {
    // Add suffix to map div ID
    //var postid = jQuery(this).data("post_id");
    //var newid = jQuery(this).attr("id") + '-' + jQuery(this).data("post_id");
    var newid = jQuery(this).attr("id") + '-' + i;
    jQuery(this).attr("id", newid);

    // Instantiate new map editor object and add to array
    maps[i] = new gmapEditor(jQuery(this));
});
});

以前のように要素のデータ属性を使用するのではなく、単純に ID にインデックスを追加することにしましたが、その方法でも機能させることができました。