div idとinnerHTMLの内容をjavascriptで変更する

Question

こんにちは、Googleマップとh3テキストをjavascriptで変更しようとしていますが、動作しません。

私がしたいことは、さまざまなマップとヘッダーを表示することです。基本的にはid="map2"と<div id="map"></div> idを置き換えて、ロサンゼルスの代わりにベルリンの場所を表示します。 また、私は <h3 div="textChange">Worlds Finals Season 3 and 6</h3>のテキストを "Worlds Season 5"に置き換えたいと思います。

は、ここにHTMLです：

function initMap() { 
    var losAngeles = { 
     lat: 34.038037, 
     lng: -118.244753 
    }; 
    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 4, 
     center: losAngeles 
    }); 
    var marker = new google.maps.Marker({ 
     position: losAngeles, 
     map: map 
    }); 

    var berlin = { 
     lat: 52.518894, 
     lng: 13.407413 
    }; 
    var map2 = new google.maps.Map(document.getElementById('map2'), { 
     zoom: 4, 
     center: berlin 
    }); 

function changediv() { 
    if (document.getElementById("map")) { 
     document.getElementById("textChange").innerHTML = "Worlds Finals Season 5";   
     document.getElementById("map").id = "map2"; 
    } 
} 

EDIT：

<article> 
<div class="container"> 
<button onclick="changediv()">Season 5</button> 
<h3 id="textChange">Worlds Finals Season 3 and 6</h3> 
<div id="map"></div> 
</div> 
</article> 

はここでJavascriptのだ "onlick" "DIV" と括弧は、今H3テキストの変更が、マップを追加しますまだ変更されません、私は動作するようにページをrelaodする必要がありますか？ GoogleマップAPIを使用しています。

Answer 1

1） タイプミスがここにあります：へ

<h3 div="textChange">Worlds Finals Season 3 and 6</h3> 

変更を：

<h3 id="textChange">Worlds Finals Season 3 and 6</h3> 

2） 別のタイプミスがHTML

にありますコメントで述べたように

<button onlick="changediv">Season 5</button> 

関数を呼び出すクリックをトリガーすると、かっこが忘れてしまいました。

<button onlick="changediv()">Season 5</button> 

3） 少なくとも最後のではなく、マップ。 。新しいインスタンスを作成するのではなく、場所を変更するだけで、ドキュメントに従ってマップインスタンスを再利用する必要があります。

function changeDiv(){ 
    if (document.getElementById("map")) { 
    document.getElementById("textChange").innerHTML = "Worlds Finals Season5";   
    var location = new google.maps.LatLng(berlin.lat, berlin.lng); 
    map.panTo(location) 
    } 

} 

Answer 2

map.setCenter（LatLng）でマップを移動するだけです。 この方法では他のマーカーは使用されず、既存のマーカーは消去されません。 panTo（LatLng） 地図を初期化した後も両方の方法を利用できます。

あなたがここに https://developers.google.com/maps/documentation/javascript/reference#Map