用javascript更改div id和innerHTML內容

Question

嗨，我試圖用javascript更改google地圖和h3文本，但它不工作。

我想要做的是顯示不同的地圖和標題，所以基本上我想用id="map2"替換<div id="map"></div> id來顯示柏林位置而不是洛杉磯。 另外我想用 "Worlds Season 5"替換 <h3 div="textChange">Worlds Finals Season 3 and 6</h3>文本。

這裏的HTML：

<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的：

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"; 
    } 
} 

編輯： 「點擊數」， 「格」 和括號加，所以現在H3文本的變化，但地圖仍然不會改變，我是否必須重新編輯該頁面才能正常工作？使用谷歌地圖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