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

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

函数GetRoute（）{
source=document.getElementById（“pickupaddress”）.value；
destination=document.getElementById（“deliveryaddress”）.value；
var请求={
来源：来源：，
目的地：目的地，
travelMode:google.maps.travelMode.DRIVING
};
var service=new google.maps.DistanceMatrixService（）；
service.getDistanceMatrix({
来源：[来源]，
目的地：[目的地]，
travelMode:google.maps.travelMode.DRIVING，
unitSystem:google.maps.unitSystem.METRIC，
避免：错误，
避免收费：错误
}，功能（响应、状态）{
if（状态==google.maps.DistanceMatrixStatus.OK&&response.rows[0]。元素[0]。状态！=“零结果”）{
var distance=response.rows[0]。元素[0]。distance.text；
var dvDistance=document.getElementById（“距离操作”）；
dvDistance.innerHTML=“”；
dvDistance.innerHTML+=距离；
}否则{
警报（“无法通过道路找到距离”）；
}
});
}
函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
mapTypeControl:false，
中心：{lat:4.2105，lng:101.9758}，
缩放：8
});
新的自动完成方向Shandler（map）；
} 
/**
*@constructor
*/
函数自动完成方向Shandler（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=新的google.maps.directionsService；
this.directionsDisplay=新的google.maps.DirectionsRenderer；
此.directionsDisplay.setMap（map）；
var deliveryrestrictOptions={componentrestricts:{country:'my'}，placeIdOnly:true}；
var originAutocomplete=new google.maps.places.Autocomplete(
原始输入、交付限制选项）；
var destinationAutocomplete=new google.maps.places.Autocomplete(
目的输入、交付限制选项）；
此.setupPlaceChangedListener（originAutocomplete，'ORIG'）；
此.setupPlaceChangedListener（destinationAutocomplete，'DEST'）；
}
//在单选按钮上设置侦听器以更改位置上的筛选器类型
//自动完成。
AutoCompletedDirectionShandler.prototype.setupClickListener=函数（id，模式）{
var radioButton=document.getElementById（id）；
var me=这个；
radioButton.addEventListener（'单击'，函数（））{
me.travelMode=mode；
我。路线（）；
});
};
AutoCompletedDirectionShandler.prototype.setupPlaceChangedListener=函数（自动完成，模式）{
var me=这个；
autocomplete.bindTo（'bounds'，this.map）；
autocomplete.addListener（'place\u changed'，function（）{
var place=autocomplete.getPlace（）；
如果（！place.place\u id）{
警告（“请从下拉列表中选择一个选项”）；
返回；
}
如果（模式=='ORIG'）{
me.originPlaceId=place.place\u id；
}否则{
me.destinationPlaceId=place.place\u id；
}
我。路线（）；
});
};
AutoCompletedDirectionShandler.prototype.route=函数（）{
如果（！this.originPlaceId | |！this.destinationPlaceId）{
返回；
}
var me=这个；
此路径为.DirectionService.route({
原点：{'placeId'：this.originPlaceId}，
目标：{'placeId'：this.destinationPlaceId}，
travelMode:this.travelMode
}，功能（响应、状态）{
如果（状态=='OK'）{
me.directionsDisplay.setDirections（响应）；
GetRoute（）；
}否则{
window.alert（'由于'+状态，指示请求失败）；
}
});
};
window.ParsleyConfig={
errorsWrapper:“”，
错误模板：“”，
类处理程序：函数（el）{
返回el.$element.closest（'input'）；
},
successClass:“有效”，
errorClass:“无效”
};

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

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

---

google.maps.event.trigger（map，'resize'），其中map是您的map实例名称。

我认为您发布的代码不足以重现该问题。主要的一点是，这可能是由于您使用的HTML结构/框架以及页面的构建方式。请在您的页面/框架/库等上提供一个或至少提供更多详细信息。为什么？在哪里触发调整大小？什么时候触发调整大小？请提高答案的质量。请参考initmap末尾的google.maps.event.trigger（映射，“调整大小”）

<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>