Bootstrap 4 Google Map обновить страницу, чтобы показать - PullRequest
Новая
       5

Bootstrap 4 Google Map обновить страницу, чтобы показать

0 голосов
/ 30 сентября 2018

на моем сайте начальной загрузки я использовал navbar для переключения между разными html-страницами.Одна из этих страниц является контактной страницей с картой Google.Теперь, когда я нажимаю на странице контактов, карта не отображается, но если я обновляю страницу, карта отображается.Это мой код: 

<!-- Map container -->
            <div id="map" id="map-container-7" class="z-depth-1-half map-container">
            </div>

 <script async defer

src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB2866jRcjU24KypJAb_XLEoV3c6c6BJEQ&callback=initMap"></script>

js файл 

$(function () {

function initMap() {

    var location = new google.maps.LatLng(41.650656, 12.716989);

    var mapCanvas = document.getElementById('map');
    var mapOptions = {
        center: location,
        zoom: 16,
        panControl: false,
        scrollwheel: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(mapCanvas, mapOptions);

    var markerImage = 'marker.png';

    var marker = new google.maps.Marker({
        position: location,
        map: map,
        icon: markerImage
    });

    // var contentString = '<div class="info-window">' +
    //         '<h3>Info Window Content</h3>' +
    //         '<div class="info-content">' +
    //         '<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>' +
    //         '</div>' +
    //         '</div>';
    //
    // var infowindow = new google.maps.InfoWindow({
    //     content: contentString,
    //     maxWidth: 400
    // });

    marker.addListener('click', function () {
        infowindow.open(map, marker);
    });

    var styles = [{"featureType": "landscape", "stylers": [{"saturation": -100}, {"lightness": 65}, {"visibility": "on"}]}, {"featureType": "poi", "stylers": [{"saturation": -100}, {"lightness": 51}, {"visibility": "simplified"}]}, {"featureType": "road.highway", "stylers": [{"saturation": -100}, {"visibility": "simplified"}]}, {"featureType": "road.arterial", "stylers": [{"saturation": -100}, {"lightness": 30}, {"visibility": "on"}]}, {"featureType": "road.local", "stylers": [{"saturation": -100}, {"lightness": 40}, {"visibility": "on"}]}, {"featureType": "transit", "stylers": [{"saturation": -100}, {"visibility": "simplified"}]}, {"featureType": "administrative.province", "stylers": [{"visibility": "off"}]}, {"featureType": "water", "elementType": "labels", "stylers": [{"visibility": "on"}, {"lightness": -25}, {"saturation": -100}]}, {"featureType": "water", "elementType": "geometry", "stylers": [{"hue": "#ffff00"}, {"lightness": -25}, {"saturation": -97}]}];

    map.set('styles', styles);


}

google.maps.event.addDomListener(window, 'load', initMap);
});

Любая помощь, как решить эту проблему и показать карту каждый раз, когда я нажимаю на вкладку контактной страницы?

Спасибо

...