谷歌地图 API 在我的 Laravel 应用程序中显示空白屏幕

Question

在我的 Laravel 应用程序中，我使用谷歌地图来显示两个地方之间的路线和距离。设置谷歌地图后，我测试我的应用程序。其显示为空白屏幕。我什至使用我在 Google 网站上申请的密钥注册了该应用程序。我已经为此工作了 2 个小时，但无法弄清楚。

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY API KEY&libraries=places&callback=initMap&sensor=false" async defer></script>


<script type="text/javascript">

     function GetRoute() {

        source = document.getElementById("pickupaddress").value;
        destination = document.getElementById("deliveryaddress").value;

        var request = {
            origin: source,
            destination: destination,
            travelMode: google.maps.TravelMode.DRIVING
        };



        var service = new google.maps.DistanceMatrixService();
        service.getDistanceMatrix({
            origins: [source],
            destinations: [destination],
            travelMode: google.maps.TravelMode.DRIVING,
            unitSystem: google.maps.UnitSystem.METRIC,
            avoidHighways: false,
            avoidTolls: false
        }, function (response, status) {
            if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") {
                var distance = response.rows[0].elements[0].distance.text;
                var dvDistance = document.getElementById("distanceops");
                dvDistance.innerHTML = "";
                dvDistance.innerHTML += distance;

            } else {
                alert("Unable to find the distance via road.");
            }
        });


    }


    function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
            mapTypeControl: false,
            center: {lat: 4.2105, lng: 101.9758},
            zoom: 8
    });
    new AutocompleteDirectionsHandler(map);
    } 

    /**
     * @constructor
    */
    function AutocompleteDirectionsHandler(map) {
        this.map = map;
        this.originPlaceId = null;
        this.destinationPlaceId = null;
        this.travelMode = 'WALKING';
        var originInput = document.getElementById('pickupaddress');
        var destinationInput = document.getElementById('deliveryaddress');

        this.directionsService = new google.maps.DirectionsService;
        this.directionsDisplay = new google.maps.DirectionsRenderer;
        this.directionsDisplay.setMap(map);

        var deliveryrestrictOptions = {componentRestrictions: {country: 'my'},placeIdOnly: true};

        var originAutocomplete = new google.maps.places.Autocomplete(
            originInput, deliveryrestrictOptions);
        var destinationAutocomplete = new google.maps.places.Autocomplete(
            destinationInput,deliveryrestrictOptions);

        this.setupPlaceChangedListener(originAutocomplete, 'ORIG');
        this.setupPlaceChangedListener(destinationAutocomplete, 'DEST');
    }


      // Sets a listener on a radio button to change the filter type on Places
    // Autocomplete.
    AutocompleteDirectionsHandler.prototype.setupClickListener = function(id, mode) {
        var radioButton = document.getElementById(id);
        var me = this;
        radioButton.addEventListener('click', function() {
            me.travelMode = mode;
            me.route();

        });
    };

    AutocompleteDirectionsHandler.prototype.setupPlaceChangedListener = function(autocomplete, mode) {
        var me = this;
        autocomplete.bindTo('bounds', this.map);
        autocomplete.addListener('place_changed', function() {
            var place = autocomplete.getPlace();
            if (!place.place_id) {
                window.alert("Please select an option from the dropdown list.");
                return;
            }
            if (mode === 'ORIG') {
                me.originPlaceId = place.place_id;
            } else {
                me.destinationPlaceId = place.place_id;
            }
            me.route();
        });

    };

    AutocompleteDirectionsHandler.prototype.route = function() {
        if (!this.originPlaceId || !this.destinationPlaceId) {
            return;
        }
        var me = this;

        this.directionsService.route({
            origin: {'placeId': this.originPlaceId},
            destination: {'placeId': this.destinationPlaceId},
            travelMode: this.travelMode
        }, function(response, status) {
            if (status === 'OK') { 

                me.directionsDisplay.setDirections(response);

                GetRoute();


            } else {
                window.alert('Directions request failed due to ' + status);
            }
        });
    };



    window.ParsleyConfig = {
        errorsWrapper: '<div></div>',
        errorTemplate: '<span class="error-text"></span>',
        classHandler: function (el) {
            return el.$element.closest('input');
        },
        successClass: 'valid',
        errorClass: 'invalid'
    };


</script>

Answer 1

我曾在谷歌地图上工作过。谷歌地图不会在模态或任何隐藏的 div 中加载（出于性能原因）。

这就是你要做的。在地图上触发调整大小，它应该呈现地图。

google.maps.event.trigger(map, 'resize') 其中 map 是您的地图实例名称。