Ändern div id und innerHTML Inhalt mit Javascript

Question

Hallo, ich versuche, eine Google Map und h3 Text mit Javascript zu ändern, aber es funktioniert nicht.

Was ich tun möchte, ist verschiedene Karten und Header anzuzeigen, also im Grunde möchte ich die <div id="map"></div> ID mit id="map2" ersetzen, um den Standort Berlin anstelle von Los Angeles anzuzeigen. Auch ich möchte den <h3 div="textChange">Worlds Finals Season 3 and 6</h3> Text durch "Worlds Season 5" ersetzen.

Hier ist der 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> 

Hier ist die 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"; 
    } 
} 

EDIT: "onlick" "div" und Klammern hinzugefügt werden, so dass nun die h3 Textänderungen, aber die Karte werde ich mich immer noch nicht ändern, muss ich die Seite für das funktionieren? Mit Google Maps API.

Answer 1

1) gibt es ein Tippfehler hier:

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

Änderung es zu:

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

2) Wie im Kommentar erwähnt, gibt es eine andere Fehler im HTML-Code der

Wenn Sie einen Klick auslösen möchten, dass die Funktion aufgerufen werden soll, haben Sie die Klammer vergessen.

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

3) last but not least, die Karte. . Karteninstanzen gemäß dem Dokument sollten wiederverwendet werden, anstatt eine neue Instanz zu erstellen, sollten Sie nur den Speicherort ändern.

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

Sie können die Karte einfach mit map.setCenter (LatLng) verschieben. Diese Methode verwendet keine anderen Markierungen und löscht vorhandene Markierungen nicht. Sie können die Karte auch über die panTo (LatLng) verschieben Beide Methoden sind auch verfügbar, nachdem die Karte initialisiert wurde.

Sie können mehr hier lesen https://developers.google.com/maps/documentation/javascript/reference#Map