JS版Google Maps APIの各要素にidを付与したい

Question

これからする質問を大まかにまとめると、
あるidの決められた要素の子要素にidを付与することができたが、その要素をgetElementByIdをして取得したとしても、console.logしたときにundefinedになるかhiddenの空っぽなdivが表示されるかになって予想される結果にならない理由とその解決方法を知りたい。
ということです。

これから詳細を説明します。
Google Maps APIを使って自分用のアプリを開発したいのですが、そのためにGoogle Maps APIで生成したhtmlの各要素にidやclassを付け足す必要が出てきました。

Google maps APIのhtml構造は次のようになっています

<div id = "map"> #1階層目 →<div> #2階層目 →→<div> #3階層目 →→→<div> #4階層目 →→→<iframe> →→→<div> →→→<div> →→→<div> →→→<div> →→→<div> →→→<button> →→→<div> →→→<div> →→→<div>

(5階層目以降もまだ続いていますが、自分がつまずいているのはそれ以前のところですので割愛します。)

1階層目のdivを次のように変数に収めました。
var map_prime = document.getElementById("map");

その後、2階層目のdivに次のようにidを与えました。
map_prime.children[0].setAttribute('id',"mapchild0")

これをまた変数に収めるため次のようにしました。
var mapchild0 = document.getElementById("mapchild0")

この時点でconsole.log(mapchild0)をすると何も問題なく2階層目のdivとその中身が表示されます。
ここで、console.log(mapchild0.children[0])をすると3階層目の1つ目のdivが表示されると思っていましたが、最初に述べたundefinedか全く関係ないhiddenのついたdivが表示されてしまいます。

これがGoogle Maps APIだから起こる現象なのか検証するために、適当にdivを入れ子にしたhtmlを作って、最深部のdivにidを付けるテストを行ってみましたが、問題なくつけることができました。
プログラム自体は間違っていなさそうなので、Googleによって要素を取得することを制限されているのではないかと考えています。
最終的に自分がidやclassを付けたいのはGooglemapのマーカーにあたる部分なので、マーカーをセットするときにclassを付与すればいいとも考えましたが、いまのところうまくいってません...

APIkeyを使っているため、プログラムを共有するのにためらいがあって、具体的な内容を共有することができないことが残念ですが回答をお待ちいたします...

Comments

[Lhankor_Mhy]

↓このサンプルページで、

https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/examples/map-simple_445fc26f1e5668a6faede0292a01b6abd846198a1e20e5b2f1ebcbdceb9ebf7a.frame?hl=ja

↓このコードを実行してみましたが、問題なく要素が取得できました。
var map_prime = document.getElementById("map");
map_prime.children[0].setAttribute('id',"mapchild0")
var mapchild0 = document.getElementById("mapchild0")
console.log(mapchild0)
console.log(mapchild0.children[0])

ですので、問題はGoogleマップAPIではなくて、ご提示いただいていない部分のコードにあるのではないかな、と思います。