Question

地图显示为白色，没有显示任何内容。我的CSS：

/* 10. Map */
#map { height: 450px; width: 100%; }
.map-overlay { background: url({{URL::asset('assets/img/map-bg.png')}}) no-repeat center top; width: 100%; text-align: center; border-top: 1px solid #dfdfdf; background-color: #FFF }
.map-overlay:hover { filter: alpha(opacity=50); opacity: 0.5; }
.map-button { font-family: "Oswald", sans-serif; font-size: 14px; font-weight: 400; text-transform: uppercase; letter-spacing: 1px; background-color: transparent; width: 100%; height: 113px; }
.map-button:hover, 
.map-button:focus { opacity: 1; }
.map-button:before { content: "\f041"; font-family: 'FontAwesome'; font-size: 19px; margin-right: 10px; color: #763940 }
#googlemap { display: none; }
.map { padding:0 !important ; position: relative; }

我的HTML：

    <!-- START OF MAPS -->
    <section class="map">
        <div class="map-overlay">
            <button class="map-button" value="Show map">Where I was coded</button>
        </div>
        <div id="googlemap">
            <div id="map"></div>
        </div>
    </section>
    <!-- END OF MAPS -->

我的map.js

 // Create the Google Map after Loading
google.maps.event.addDomListener(window, 'load', init);

function init() {

    $('section.map').find('#googlemap').show();
    // Basic options for a simple Google Map
    // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
    var mapOptions = {
        // How zoomed in you want the map to start at (always required)
        zoom: 11,

        // The latitude and longitude to center the map (always required)
        center: new google.maps.LatLng(42.373587, -71.116581
), // Harvard Yard, 2 Kirkland Street

        // How you would like to style the map. 
        // This is where you would paste any style found on Snazzy Maps.
        styles: [{"featureType":"water","elementType":"geometry.fill","stylers":[{"color":"#d3d3d3"}]},{"featureType":"transit","stylers":[{"color":"#808080"},{"visibility":"off"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"visibility":"on"},{"color":"#b3b3b3"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"road.local","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"weight":1.8}]},{"featureType":"road.local","elementType":"geometry.stroke","stylers":[{"color":"#d7d7d7"}]},{"featureType":"poi","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#ebebeb"}]},{"featureType":"administrative","elementType":"geometry","stylers":[{"color":"#a7a7a7"}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"landscape","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#efefef"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#696969"}]},{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"visibility":"on"},{"color":"#737373"}]},{"featureType":"poi","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"color":"#d6d6d6"}]},{"featureType":"road","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{},{"featureType":"poi","elementType":"geometry.fill","stylers":[{"color":"#dadada"}]}]
    };

    // Get the HTML DOM element that will contain your map 
    // We are using a div with id="map" seen below in the <body>
    var mapElement = document.getElementById('map');

    // Create the Google Map using out element and options defined above
    var map = new google.maps.Map(mapElement, mapOptions);
    setTimeout(function(){
        $('section.map').find('#googlemap').hide();
    }, 1000);
}

$('a[href=#tab1], a[href=#tg2]').on('click', function() {
    setTimeout(function(){
        google.maps.event.trigger(map, 'resize');
    }, 50);
});
$(".map-button").on("click", function () {
    $("#googlemap").slideToggle("fast");
    $(this).text($(this).text() == "Locate Us on Map" ? "Locate Us on Map" : "Locate Us on Map");
    if($(this).text() == 'Locate Us on Map')
    {
        //google.maps.event.trigger(map, 'resize');
    }
});

我错过了什么？如果地图未加载，则应调用地图叠加层，但这也不起作用。图片有{{因为我正在使用的框架。

谢谢。

Answer 1

您在页面加载后1秒隐藏地图：

setTimeout(function(){
    $('section.map').find('#googlemap').hide();
}, 1000);

fiddle with that commented out

Google Maps Javascript API未加载

1 个答案: