CODEWITHSUNDEEP
javascriptgoogle-maps
Alex
Alex

Reputation: 2402

Failing to get map through google javascript maps api, does not throw errors but iframe src is about:blank

    function initMap() {
        // Styles a map in night mode.
        var uluru = {lat: -25.363, lng: 131.044};
        var map = new google.maps.Map(document.getElementById('maprand'), {
          center: uluru,
          zoom: 12,
        });
      }
<html>
<head>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=**API-KEY**callback=initMap"></script>
</head>

<body>
<div id="map"></div>
</body>

</html>

I'm using the following code:

<script>
function initMap() {
    var uluru = {lat: -25.363, lng: 131.044};
    var map = new google.maps.Map(document.getElementById('map'), {
          center: uluru,
          zoom: 12,
});
}
</script>

It doesn't throw any errors, but diving into the div that it creates shows this:

<iframe frameborder="0" src="about:blank" style="z-index: -1; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; border: none;"></iframe>

Clearly the problem here is src="about:blank", but I don't know why it's doing that.

Upvotes: 1

Views: 611

Answers (1)

Volkan Yılmaz
Volkan Yılmaz

Reputation: 639

I think first you should add height and width of map and then check your key rules.

Example:

https://codepen.io/anon/pen/PeBwgQ 

function initMap() {
        // Styles a map in night mode.
        var uluru = {lat: -25.363, lng: 131.044};
        var map = new google.maps.Map(document.getElementById('map'), {
          center: uluru,
          zoom: 12,
        });
      }
<script async defer src="https://maps.googleapis.com/maps/api/js?senson=false&callback=initMap"></script>


<div id="map" style="width: 300px; height: 300px"></div>

Upvotes: 6

Related Questions