Quiero mapas de Google en mi proyecto Laravel donde puedo trazar la polilínea compleja en el mapa pero el mapa no se muestra en absoluto. Solo muestra un div en blanco.
<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>¿Hay algún paquete específico que deba instalar para que este componente funcione? ¿O hay algo que deba definir en algún archivo? Por favor ayúdenme, cada vez que veo el mismo problema como el mío, no hay respuesta....
Establezca siempre la altura del mapa explícitamente para definir el tamaño del elemento div * que contiene el mapa:
#map { height: 200px; width: 100%; }Cuando pongo la función javascript primero antes de HTML, el mapa aparece con una polilínea funcional.