I am simply trying to get the Simple Map (https://developers.google.com/maps/documentation/javascript/examples/map-simple#maps_map_simple-javascript) for Google Maps Javascript API working for me.
I have this webpage (I have put in the API key and given the key access to Javascript API)
<!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>
I generates an html page but the iframe generate by the code effectively has an empty document inside. It is
<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>
I must be missing something really simple and basic - please help
I don't know why but yes, when i try to check your code i found that you didn't add css of body and html given by google map. When i add that it shows content inside it. CSS code i found is below-
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
Please check and respond