Question

我看到其他人遇到同样的问题我尝试了google.maps.event.trigger（map，'resize'）;和这个网站的其他选项，无论我尝试什么，我都无法让这个工作正常。这是没有我无法工作的所有选项的代码。我认为添加然后尝试修复会更容易。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src='https://maps.googleapis.com/maps/api/js?key=AIzaSyCrL67QeBn59gg63sOW5-u0tAbpH2j7IK4&sensor=false&extension=.js'></script>
<script>
    google.maps.event.addDomListener(window, 'load', init);
    var map;
    function init() {
    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 mapElement = document.getElementById('Cities');
    var map = new google.maps.Map(mapElement, mapOptions);
    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']
    ];
    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];}
        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 = '';     }
        }
</script>
<style>
#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;
}
</style>
</head>
<body>
<div class="col-sm-2">
    <input name="More Info" type="button" class="details-css" id="Map" value="View map of Dominical / Uvita" />
                        <script>
                            $('#Map').click(function() {
                            $('#Map-1').toggle('swing', function() {
                                });
                                });
                        </script>
    </div>
    <div class="clearfix"></div>
    <div class="col-sm-12 More-Info" id="Map-1" style="display:none;">       
         <div id="Cities"></div>
    </div
</body>
</html>

感谢您提供有关使其正常工作的任何帮助。

Answer 1

您需要将地图作为全局变量，在此处删除var：

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

这是工作小提琴：

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

Answer 2

你有很多问题。

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

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

（正如Goran Jakovljevic在他的原始答案中所说，现在已被覆盖）

当您致电google.maps.event.trigger(map,'resize')时，您需要将地图变量放在范围内。
在渲染DOM之后，您需要初始化按钮onclick侦听器（您的代码执行此操作，但内联）。

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

proof of concept fiddle

代码段

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>

谷歌地图和显示无

2 个答案: