Simplemente estoy tratando de obtener el Mapa simple ( https://developers.google.com/maps/documentation/javascript/examples/map-simple#maps_map_simple-javascript ) para que la API de Javascript de Google Maps funcione para mí.
Tengo esta página web (coloqué la clave API y le di acceso a la clave a la API de Javascript)
<!DOCTYPE html> <html> <head> <title>Simple Map</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <style> #map { height: 100%; } </style> <!-- jsFiddle will insert css and js --> </head> <body> <div id="map"></div> <!-- Async script executes immediately and must be after any DOM elements used in callback. --> <script src="https://maps.googleapis.com/maps/api/js?key=<MY SPI KEY>&callback=initMap&v=weekly&channel=2" async ></script> <script> let map; function initMap() { map = new google.maps.Map(document.getElementById("map"), { center: { lat: -34.397, lng: 150.644 }, zoom: 8, }); } </script> </body> </html>Genero una página html pero el iframe generado por el código tiene efectivamente un documento vacío dentro. Está
<iframe aria-hidden="true" tabindex="-1" style="z-index: -1; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; border: medium none;" frameborder="0"> #document <html> <head></head> <body></body> </html> </iframe>Debo estar perdiendo algo realmente simple y básico - por favor ayuda
No sé por qué, pero sí, cuando intento verificar tu código, descubrí que no agregaste CSS del cuerpo y html proporcionados por Google Map. Cuando agrego eso, muestra contenido dentro de él. El código CSS que encontré está debajo-
html, body { height: 100%; margin: 0; padding: 0; }Por favor verifique y responda