Change div id and innerHTML content with javascript

Question

Hi i'm trying to change a google map and h3 text with javascript, but it's not working.

What i want to do is display different maps and headers, so basically i want to replace the <div id="map"></div> id with id="map2" to display the Berlin Location instead of Los Angeles. ~~Also i want to replace the <h3 div="textChange">Worlds Finals Season 3 and 6</h3> text with "Worlds Season 5".~~

Here's the 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>

Here's the 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" and parantheses are added, so now the h3 text changes, but the map still won't change, do i have to relaod the page for that to work? Using google maps api.

Shouldn't it be onclick="changediv()"? I have never heard about a lick event — Alon Eitan
– Alon Eitan, Commented Apr 24, 2017 at 15:10

Karim · Accepted Answer · 2017-04-25 14:30:05Z

2

1) there's a typo here:

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

change it to:

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

2) As mentioned in the comment there's another typo in the html

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

when you trigger a click you want the function to be invoked, you forgot the parenthesis.

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

3) last but not least, the map. . Map instances according to the doc should be reused, instead of creating a new instance you should just change the location.

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)
  }

}

edited Apr 25, 2017 at 14:30

answered Apr 24, 2017 at 15:11

Karim

8,6823 gold badges27 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alon Eitan Over a year ago

Oh, even on the id attribute they managed to get it wrong. I noticed that they are trying to bind the function to a onlick event (So you might want to add it to your answer)

Robin Over a year ago

I did honestly not see the typos even after 30 minutes of looking at it, that helped a lot! Now the h3 text changes, but the map still won't change, do i have to reload the page or something?

Karim Over a year ago

i've fixed my answer for the map part :)

Osama · Accepted Answer · 2017-04-24 16:41:21Z

0

You can simply move the map with map.setCenter(LatLng). This method will not use any other markers and will not erase existing markers. You could also move the map via the panTo(LatLng) Both methods are also available after the map has been initialized.

You can read more here https://developers.google.com/maps/documentation/javascript/reference#Map

answered Apr 24, 2017 at 16:41

Osama

3,0301 gold badge15 silver badges16 bronze badges

Collectives™ on Stack Overflow

Change div id and innerHTML content with javascript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related