谷歌地图并显示无

您需要将映射作为全局变量，请在此处删除 var：

map = new google.maps.Map(mapElement, mapOptions);

这是工作小提琴：

https://jsfiddle.net/9mfjt5uq/1/

您有多个问题。

1. 您需要在动画完成后调用google.maps.event.trigger(map,'resize')。

   $（'#Map-1'）.toggle（'swing'， function（） { google.maps.event.trigger（map， 'resize'）}

正如戈兰·雅科夫列维奇（Goran Jakovljevic）在他的原始答案中建议的那样，现已被覆盖）

2. 调用 google.maps.event.trigger(map,'resize') 时，需要映射变量在作用域内。

您需要在呈现

3. DOM 后初始化按钮 onclick 侦听器（您的代码执行此操作，但会内联执行）。

一种选择是在init函数内移动按钮单击初始化（它在本地范围内）。

概念验证小提琴

代码片段：

google.maps.event.addDomListener(window, 'load', init);
var map;
function init() {
  var mapElement = document.getElementById('Cities');
  map = new google.maps.Map(mapElement, mapOptions);
  var bounds = new google.maps.LatLngBounds();
  for (i = 0; i < locations.length; i++) {
    if (locations[i][1] == 'undefined') {
      description = '';
    } else {
      description = locations[i][1];
    }
    if (locations[i][2] == 'undefined') {
      telephone = '';
    } else {
      telephone = locations[i][2];
    }
    if (locations[i][3] == 'undefined') {
      email = '';
    } else {
      email = locations[i][3];
    }
    if (locations[i][4] == 'undefined') {
      web = '';
    } else {
      web = locations[i][4];
    }
    if (locations[i][7] == 'undefined') {
      markericon = '';
    } else {
      markericon = locations[i][7];
    }
    var marker = new google.maps.Marker({
      // icon: markericon,
      position: new google.maps.LatLng(locations[i][5], locations[i][6]),
      map: map,
      title: locations[i][0],
      desc: description,
      tel: telephone,
      email: email,
      web: web
    });
    link = '';
    bounds.extend(marker.getPosition());
  }
  $('#Map').click(function() {
    $('#Map-1').toggle('swing', function() {
      google.maps.event.trigger(map, 'resize')
      map.fitBounds(bounds);
    });
  });
}
var mapOptions = {
  center: new google.maps.LatLng(9.150041177812687, -83.73987379035185),
  zoom: 11,
  zoomControl: true,
  zoomControlOptions: {
    style: google.maps.ZoomControlStyle.DEFAULT,
  },
  disableDoubleClickZoom: true,
  mapTypeControl: true,
  mapTypeControlOptions: {
    style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
  },
  scaleControl: true,
  scrollwheel: true,
  panControl: true,
  streetViewControl: true,
  draggable: true,
  overviewMapControl: true,
  overviewMapControlOptions: {
    opened: false,
  },
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  styles: [{
    "featureType": "administrative.land_parcel",
    "elementType": "all",
    "stylers": [{
      "visibility": "off"
    }]
  }, {
    "featureType": "landscape.man_made",
    "elementType": "all",
    "stylers": [{
      "visibility": "off"
    }]
  }, {
    "featureType": "poi",
    "elementType": "labels",
    "stylers": [{
      "visibility": "off"
    }]
  }, {
    "featureType": "road",
    "elementType": "labels",
    "stylers": [{
      "visibility": "simplified"
    }, {
      "lightness": 20
    }]
  }, {
    "featureType": "road.highway",
    "elementType": "geometry",
    "stylers": [{
      "hue": "#f49935"
    }]
  }, {
    "featureType": "road.highway",
    "elementType": "labels",
    "stylers": [{
      "visibility": "simplified"
    }]
  }, {
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [{
      "hue": "#fad959"
    }]
  }, {
    "featureType": "road.arterial",
    "elementType": "labels",
    "stylers": [{
      "visibility": "off"
    }]
  }, {
    "featureType": "road.local",
    "elementType": "geometry",
    "stylers": [{
      "visibility": "simplified"
    }]
  }, {
    "featureType": "road.local",
    "elementType": "labels",
    "stylers": [{
      "visibility": "simplified"
    }]
  }, {
    "featureType": "transit",
    "elementType": "all",
    "stylers": [{
      "visibility": "off"
    }]
  }, {
    "featureType": "water",
    "elementType": "all",
    "stylers": [{
      "hue": "#a1cdfc"
    }, {
      "saturation": 30
    }, {
      "lightness": 49
    }]
  }],
}
var locations = [
  ['San Jose', 'undefined', 'undefined', 'undefined', 'undefined', 9.922489357888226, -84.09076751534423, 'http://thecostaricatoursite.com/images/maps/San-Jose.png'],
  ['CORCOVADO', 'undefined', 'undefined', 'undefined', 'undefined', 8.513076238639655, -83.63826823411557, 'http://thecostaricatoursite.com/images/maps/CORCOVADO.png'],
  ['Uvia', 'undefined', 'undefined', 'undefined', 'undefined', 9.150041177812687, -83.73987379035185, 'http://thecostaricatoursite.com/images/maps/DOMINICAL-UVITA.png'],
  ['Arenal', 'undefined', 'undefined', 'undefined', 'undefined', 10.439814447913703, -84.66606394726563, 'http://thecostaricatoursite.com/images/maps/Arenal.png'],
  ['Jaco', 'undefined', 'undefined', 'undefined', 'undefined', 9.620213, -84.622485, 'http://thecostaricatoursite.com/images/maps/JACO.png'],
  ['MANUEL-ANTONIO', 'undefined', 'undefined', 'undefined', 'undefined', 9.401996232338849, -84.15583516931156, 'http://thecostaricatoursite.com/images/maps/MANUEL-ANTONIO.png'],
  ['MONTEVERDE', 'undefined', 'undefined', 'undefined', 'undefined', 10.26169695130501, -84.82557165606693, 'http://thecostaricatoursite.com/images/maps/MONTEVERDE.png'],
  ['PAPAGAYO', 'undefined', 'undefined', 'undefined', 'undefined', 10.550227, -85.697340, 'http://thecostaricatoursite.com/images/maps/PAPAGAYO.png'],
  ['PUERTO VIEJO', 'undefined', 'undefined', 'undefined', 'undefined', 9.657154, -82.756974, 'http://thecostaricatoursite.com/images/maps/PUERTO-VIEJO.png'],
  ['TAMARINDO', 'undefined', 'undefined', 'undefined', 'undefined', 10.296203852400582, -85.84199989947513, 'http://thecostaricatoursite.com/images/maps/TAMARINDO.png'],
  ['TORTUGUERO', 'undefined', 'undefined', 'undefined', 'undefined', 10.538444882330598, -83.50339050793457, 'http://thecostaricatoursite.com/images/maps/TORTUGUERO.png']
];

#Cities {
  height: 500px;
  width: 100%;
}
.gm-style-iw * {
  display: block;
  width: 100%;
}
.gm-style-iw h4,
.gm-style-iw p {
  margin: 0;
  padding: 0;
}
.gm-style-iw a {
  color: #4272db;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div class="col-sm-2">
  <input name="More Info" type="button" class="details-css" id="Map" value="View map of Dominical / Uvita" />
</div>
<div class="clearfix"></div>
<div class="col-sm-12 More-Info" id="Map-1" style="display:none;">
  <div id="Cities"></div>
</div>