谷歌地图弹出窗口无效

Question

看下面我的代码。我用过自定义弹出窗口。我正在重新加载页面。第一次Popup工作正常，地图显示完美。在我第二次点击时，弹出窗口工作正常，但地图没有来。

var geocoder;
 var map;
 function initialize() {
     geocoder = new google.maps.Geocoder();
     var myOptions = {
         zoom: 13,
         mapTypeId: google.maps.MapTypeId.ROADMAP
     }
     map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
 }

 function showMap() {
     var address = 'bhubaneswar'; //alert(address);
     geocoder.geocode({ 'address': address }, function(results, status) {
         if (status == google.maps.GeocoderStatus.OK) {
             map.setCenter(results[0].geometry.location);
             var marker = new google.maps.Marker({
                 map: map,
                 position: results[0].geometry.location
             });
         } else {
             alert("Geocode was not successful for the following reason: " + status);
         }
     });
 }


$(function(){
       $('.get-direction').on('click',function(){
           initialize();
            showMap();
           $('#location-map').show();
       });
       $('.close-map').click(function(){
           $('#location-map').hide();
           $("#map-canvas").html('');
       });
 });

/* popup map start === */
.get-direction{
    cursor: pointer;
    text-decoration:underline;
}
#location-map {
    background: rgba(7, 50, 79, 0.8) none repeat scroll 0 0;
    display: none;
    height: 100%;
    left: 0;
    overflow: auto;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}
#location-map .close-map {
    margin: 5% auto 0;
    overflow: hidden;
    text-align: right;
    width: 90%;
}
#location-map .close-map span {
    background-color: #e67e22;
    border-radius: 3px 3px 0 0;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    line-height: 1em;
    padding: 5px;
}
#location-map #map-canvas {
    height: 80%;
    margin: 0 auto;
    width: 90%;
}
.gm-style {
    font-family: Roboto,Arial,sans-serif;
    font-size: 11px;
    font-weight: 400;
}
#directions-control {
    background-color: #fff;
    display: none;
    padding: 0 10px 30px;
    text-align: center;
    width: 100%;
}
#location-map #map-canvas #directions-control {
    background-color: #fff;
    display: none;
    padding: 0 10px 30px;
    text-align: center;
    width: 100%;
}

#location-map #map-canvas #directions-control p {
    font-weight: bold;
    margin: 0;
    padding: 0;
}
#location-map #map-canvas #directions-control #directions-start {
    height: 17px;
    line-height: 17px;
    margin: 0 0 5px 50px;
    width: 200px;
}
#location-map #map-canvas #directions-control #directions-submit {
    background-color: #2876aa;
    border-radius: 3px;
    border-width: 0;
    color: #fff;
    cursor: pointer;
    height: 27px;
    line-height: 27px;
    margin: 0 0 5px;
    padding: 0 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<h4 class="get-direction">Bhubaneswar</h4>
<div id="location-map">
    <div class="close-map"><span>Close Map</span></div>
    <div id="map-canvas"></div>
    <div id="directions-display"><span class="error"></span></div>
</div>

  

    

JSFIDDLE

  

Answer 1

初始化是你只做过一次的事情（顾名思义）。

你的函数showMap应该显示地图。如果它做其他事情，称之为不同的东西。

我的代码读取h4的innerHTML，并将其用作地址。 示例：

<h4 class="get-direction">Bhubaneswar</h4>
<h4 class="get-direction">Atomium, Brussels</h4>

脚本

var geocoder;
var map;
// initializes Google maps
function initialize() {
  geocoder = new google.maps.Geocoder();
  var myOptions = {
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
}
// search for an address, put a marker there.
function searchAddress(address) {
  // 'bhubaneswar'; //alert(address);
  geocoder.geocode({ 'address': address }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
      });
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}
// show the map
function showMap() {
  $('#location-map').show();
}
// hide the map (after the client clicks on the close button)
function hideMap() {
  $('#location-map').hide();
}
// document is loaded
$(function() {
  $('.get-direction').on('click',function() {
    // if map is null (the first time), initiate Google maps;
    if (! map) {
      initialize();
    }
    searchAddress( $(this).html() );
    showMap();
  });
  $('.close-map').click(function() {
    hideMap();
  });
});

Answer 2

1. 地理编码器是异步的。第一次从服务器获取响应需要一些时间，第二次，返回值已经在缓存中，因此不需要任何时间。
2. 你隐藏地图后就是在摧毁它，不要隐藏它，然后在它被取消隐藏时重新进入它。

$(function() {
  $('.get-direction').on('click', function() {
    if (!map || !map.getCenter) {
      // if map doesn't exist yet, create it
      initialize();
    }
    // centers map and displays marker
    showMap();
    $('#location-map').show();
  });
  $('.close-map').click(function() {
    $('#location-map').hide();
    // $("#map-canvas").html('');
  });
});

updated fiddle

代码段

＆＃13;
＆＃13;
var geocoder;
var map;

function initialize() {
  geocoder = new google.maps.Geocoder();
  var myOptions = {
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
}

function showMap() {
  var address = 'bhubaneswar'; //alert(address);
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
      });
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}


$(function() {
  $('.get-direction').on('click', function() {
    if (!map || !map.getCenter) {
      initialize();
    }
    showMap();
    $('#location-map').show();
  });
  $('.close-map').click(function() {
    $('#location-map').hide();
    // $("#map-canvas").html('');
  });
});
＆＃13;
/* popup map start === */

.get-direction {
  cursor: pointer;
  text-decoration: underline;
}
#location-map {
  background: rgba(7, 50, 79, 0.8) none repeat scroll 0 0;
  display: none;
  height: 100%;
  left: 0;
  overflow: auto;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}
#location-map .close-map {
  margin: 5% auto 0;
  overflow: hidden;
  text-align: right;
  width: 90%;
}
#location-map .close-map span {
  background-color: #e67e22;
  border-radius: 3px 3px 0 0;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  line-height: 1em;
  padding: 5px;
}
#location-map #map-canvas {
  height: 80%;
  margin: 0 auto;
  width: 90%;
}
.gm-style {
  font-family: Roboto, Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
}
#directions-control {
  background-color: #fff;
  display: none;
  padding: 0 10px 30px;
  text-align: center;
  width: 100%;
}
#location-map #map-canvas #directions-control {
  background-color: #fff;
  display: none;
  padding: 0 10px 30px;
  text-align: center;
  width: 100%;
}
#location-map #map-canvas #directions-control p {
  font-weight: bold;
  margin: 0;
  padding: 0;
}
#location-map #map-canvas #directions-control #directions-start {
  height: 17px;
  line-height: 17px;
  margin: 0 0 5px 50px;
  width: 200px;
}
#location-map #map-canvas #directions-control #directions-submit {
  background-color: #2876aa;
  border-radius: 3px;
  border-width: 0;
  color: #fff;
  cursor: pointer;
  height: 27px;
  line-height: 27px;
  margin: 0 0 5px;
  padding: 0 5px;
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js"></script>
<h4 class="get-direction">Bhubaneswar</h4>
<div id="location-map">
  <div class="close-map"><span>Close Map</span>
  </div>
  <div id="map-canvas"></div>
  <div id="directions-display"><span class="error"></span>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

Answer 3

你应该使用

google.maps.event.trigger(mapObj, 'resize');

加载地图后

。