Fatal编程技术网

Javascript 谷歌地图和显示无

javascript google-maps google-maps-api-3

Javascript 谷歌地图和显示无,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我看到其他人也有同样的问题，我试过google.maps.event.trigger（map，'resize'）；从这个网站和其他选项，无论我尝试什么，我只是不能让这工作的权利。 这是没有我无法使用的所有选项的代码。我想添加和修复会更容易 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <scri

我看到其他人也有同样的问题，我试过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>


google.maps.event.addDomListener（窗口'load'，init）；
var映射；
函数init（）{
变量映射选项={
中心：新google.maps.LatLng（9.150041177812687，-83.73987379035185），
缩放：11，
动物控制：对，
ZoomControl选项：{
样式：google.maps.ZoomControlStyle.DEFAULT，
},
禁用双击缩放：真，
mapTypeControl:true，
mapTypeControlOptions：{
样式：google.maps.MapTypeControlStyle.HORIZONTAL_BAR，
},
scaleControl：对，
滚轮：对，
泛控制：对，
街景控制：对，
真的，
overviewMapControl:true，
概述MapControlOptions：{
开：错，
},
mapTypeId:google.maps.mapTypeId.ROADMAP，
样式：[{“featureType”：“administrative.land_parcel”，“elementType”：“all”，“stylers”：[{“visibility”：“off”}]}，{“featureType”：“landscape.Manu_制作”，“elementType”：“all”，“stylers”：[{“visibility”：“labels”，“stylers”：[{“visibility”：“off”}]}，{“featureType”：“road”，“elementType”：“labels”，“stylers”{“visibility”：“简化”}，{“亮度”：20}]}，{“特征类型”：“道路.公路”，“要素类型”：“几何体”，“样式器”：[{“色调”：“{f49935”}，{“特征类型”：“道路.公路”，“元素类型”：“标签”，“样式器”：[{“可见性”：“简化”}}，{“特征类型”：“道路.干线”，“要素类型”：“几何体”，“样式器”：[{“色调”：“#fad959”}，{“特征类型”：“道路.干线”，“要素类型”：标签、样式器：[{“可见性”：“关闭”}、{“特征类型”：“道路.局部”、“元素类型”：“几何体”、“样式器”：[{“可见性”：“简化”}]}、{“特征类型”：“道路.局部”、“元素类型”：“标签”、“样式器”：[{“可见性”：“简化”}]}、{“特征类型”：“交通”、“元素类型”：“全部”、“样式器”：[{“可见性”：“关闭”}、{“水”、“元素类型”：“全部”，stylers:[{“色调”：“#a1cdfc”}，{“饱和度”：30}，{“亮度”：49}]}，
}
var mapeelement=document.getElementById（'Cities'）；
var map=new google.maps.map（mapElement，mapOptions）；
变量位置=[
[San Jose'，undefined'，undefined'，undefined'，undefined'，9.92248935788226，-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.62013，-84.622485，'http://thecostaricatoursite.com/images/maps/JACO.png'],
['MANUEL-ANTONIO'，'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]、“未定义”、“未定义”、“未定义”、“未定义”，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'，10.538444882330598，-83.50339050793457，'http://thecostaricatoursite.com/images/maps/TORTUGUERO.png']
];
对于（i=0；i您需要将映射作为全局变量，请在此处删除var：


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


这是工作小提琴：


您有多个问题


  • 动画完成后，需要调用
    google.maps.event.trigger（映射，'resize'）
    
$（'#Map-1'）。切换（'swing'，函数（）{