Laravel 项目中未显示地图

Question

我想在我的 Laravel 项目中使用 google 地图，我可以在其中绘制复杂的折线，但地图根本不显示。它只是显示一个空白 div.

<tr>
    <td colspan="4">
       <div id="map"></div>
    </td>
</tr>

 <!-- Map Script -->
<script
    src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&callback=initMap&v=weekly&channel=2"
    async></script>
<script>
    // This example creates a 2-pixel-wide red polyline showing the path of
    // the first trans-Pacific flight between Oakland, CA, and Brisbane,
    // Australia which was made by Charles Kingsford Smith.
    function initMap() {
        const map = new google.maps.Map(document.getElementById("map"), {
            zoom: 3,
            center: { lat: 0, lng: -180 },
            mapTypeId: "terrain",
        });
        const flightPlanCoordinates = [
            { lat: 37.772, lng: -122.214 },
            { lat: 21.291, lng: -157.821 },
            { lat: -18.142, lng: 178.431 },
            { lat: -27.467, lng: 153.027 },
        ];
        const flightPath = new google.maps.Polyline({
            path: flightPlanCoordinates,
            geodesic: true,
            strokeColor: "#FF0000",
            strokeOpacity: 1.0,
            strokeWeight: 2,
        });

        flightPath.setMap(map);
    }
</script>

我是否必须为此组件安装任何特定的包才能运行？或者我需要在任何文件中定义什么吗？请帮帮我，每当看到和我一样的问题，都没有答案....

Answer 1

当我将 javascript 函数放在 HTML 之前时，地图出现了函数折线。

Answer 2

始终明确设置地图高度以定义包含地图的 div * 元素的大小：

#map { 
   height: 200px; 
   width: 100%; 
}

Laravel 项目中未显示地图

Maps is not showing in a Laravel project

javascript

google-maps