Google Maps API issue in Iframe window

Question

I am trying to set a system whereby a Google Map appears in a popup iframe [using Fancybox], I have read a lot of similar topics on Stack Overflow and I have already implemented many of their suggestions with no success.

The issue is:

Uncaught ReferenceError: google is not defined

When the iframe is loaded. The iframe loads its data correctly (and this can be viewed on browser console) but Google maps fails to appaer and the console error (above) indicates it fails to initialise.

Some things I've aready tried or that do not apply:

• I have a callback function set up
• I am using a Javascript Map API rather than the v3 version.
• I have tried with both async and defer without success.
• I do not want the map to be the sole contents of the iframe (embedded Google map).
• I have tried using a window load javascript event detector without success (from another Question).
• The issue is not the iframe itself - that works - it's the relationship between the frame and its parent.

Annoyingly, this popup map system was working just fine after an hour of trial and error and then I cleared my browser history (or did something else) that now means the issue has returned and won't go away.

Iframe page:

<h1> Some Dynamic title </h1>
<div id="map_canvas"></div>
<div> Some other content </div>


<script type="text/javascript" async defer
        src="https://maps.googleapis.com/maps/api/js?key=<mykey>&region=GB&callback=initmap"></script>

<script type="text/javascript" >

    /** 
      Imported idea from another Question on Stackoverflow (didn't work):

    window.addEventListener('load',function(){
        if(document.getElementById('map_canvas')){
            initmap();
        }
    },false);

     **/

    var map;

    function initmap() {
        var myOptions = {
            zoom: 11,
            center: {lat: 5.345617, lng: 10.562},
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        var places=[];
        var memnames=[];
        var memid=[];
        var teams=[];
        var address=[];

        <?php
         print $mapOut; //data output to map markers. 
        ?>

        var infoWindow;
        for(var i=0 ; i<places.length ; i++){
            var iconBase = 'https://<?php print $_SERVER['SERVER_NAME'];?>/images/site/';
            var marker=new google.maps.Marker({
                position: places[i],
                map: map,
                title: memnames[i],
                icon: iconBase + 'rugby-player-4.png'
            });

            (function(i,marker){

                google.maps.event.addListener(marker, 'click', function(){

                    if(!infoWindow){
                        infoWindow = new google.maps.InfoWindow();
                    }

                    var content='<div class="mapInfo">'+
                        '<a href="/details.php?memid='+memid[i]+'">'+memnames[i]+'</a><strong>'+teams[i]+'</strong>'+address[i]+'</div>';

                    infoWindow.setContent(content);
                    infoWindow.open(map,marker);
                });

            })(i,marker);
        }
 }
/***
    google.maps.event.addDomListener(window, 'load', initmap);
    google.maps.event.addDomListener(window, "resize", function() {
        var center = map.getCenter();
        google.maps.event.trigger(map, "resize");
        map.setCenter(center);
    });
***/


</script>  

Further details:

Accessing the map page directly, I get the response that if I load the google maps script first; it tells me that initmap is not a function and then if I load it second (async/defer) it tells me that google is not defined.

This map page javascript code is exactly the same as one used on other sites (without the ajax/iframe call) and which works correctly.

I know this sounds like de ja vu of other Google map questions but the ones I've seen have not been able to resolve this issue.

Answer 1

The original issue notice in the console was:

Uncaught ReferenceError: google is not defined

This notice appears anyway even when the map loads successfully.

The reason for the map not loading/displaying correctly was the CSS; I had set the CSS of the #map_canvas element to being a % of the width/height values rather than as an absolute pixel dimension.

Solution:

While % dimensions do not work, you can use Viewport-height and Viewport-width values (vh,vw), and the map takes up this space in the iframe.

 #map_canvas {
    width: 80vw; /* rather than % dimensions */
    height: 70vh;
    margin:1rem auto;
    box-sizing: border-box;
}