显示/隐藏谷歌地图api不能正常工作 [英] Show/Hide google maps api does not work fine

问题描述

当我点击此按钮时，我想要更改值。当我这样做时，首先它会更改按钮上的文本，但不会显示地图。之后，我重复这个过程，代码工作正常。

When I click on this button, I want the value to change. When I do it, at first it changes the text on button, but the map does not appear. after that, I repeat the process and the code works fine.

function change() {
  var elem = document.getElementById("myButton1");
  if (elem.value == "Show") elem.value = "Hide";
  else elem.value = "Show";
}



function displayMap() {
  if (document.getElementById('map').style.display == "none") {
    document.getElementById('map').style.display = "block";
    initialize();
  } else {
    document.getElementById('map').style.display = "none";
  }

}

#map {
  display: none;
}

<input onclick='change(), displayMap()' type='button' value='Show' id='myButton1'></input>
<div id="map" style="width:100%; height:300px;">map</div>

推荐答案

分配 document.getElementById（'map'）。style.display =none; global

请尝试以下代码

    document.getElementById('map').style.display = "none";// this line is the solution 
    function change() {
      var elem = document.getElementById("myButton1");
      if (elem.value == "Show") elem.value = "Hide";
      else elem.value = "Show";           
    }
    function displayMap() {
      if (document.getElementById('map').style.display === "none")       {
        document.getElementById('map').style.display = "block";
       } else {
        document.getElementById('map').style.display = "none";
       }
    }

   

   

 #map {
      display: none;
    }

 <input onclick='change(), displayMap()' type='button' value='Show' id='myButton1'></input>
    <div id="map" style="width:100%; height:300px;">map</div>

注意：不要忘记调用你的 initialize（）函数已从我的代码段中移除

Note: Don't forgot to call your initialize() function which is removed from my snippet

这篇关于显示/隐藏谷歌地图api不能正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！