google maps not rendering in a nested div

Question

I am using [this][1] tutorial to render google map on my webpage. It works fine when I use it in the way it's in this tutorial. But it doesn't render on my webpage.

I have a tabbed webpage. Each tab content is opened with a div containing its id. So when I put the div with the id of map which is used by render map function to render map, it's inside the div of a Live Map tab. And it's not working.

Here is my code:

Tabbed HTML on my webpage:

<div class="tab"> //tabs defined
  <button class="tablinks" onclick="openCity(event, 'tab1')">tab1</button>
  <button class="tablinks" onclick="openCity(event, 'tab2')">tab2</button>
  <button class="tablinks" onclick="openCity(event, 'Live-Map')">Live Map</button>
</div>

<div id="Live-Map" class="tabcontent"> //map div inside tab div
<div id="map"></div>  //map div
</div>

<script> // tab selector js function
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}
</script>

EDIT

CSS

This is css. Trying solutions from other sources, I found the height of the parent div needs to be made 100%. I did that too but still no success.

 #map {
   height: 100%;
 }
#Live-Map {
   height: 100%;
 }
 /* Optional: Makes the sample page fill the window. */
 html, body {
 height: 100%;
 margin: 0;
 padding: 0;
}

EDIT

I solved the problem with bit search. The problem basically was have to give the wrapper div also 100% height & width and also to the bootstrap container div. Because Google API requires these parameters to render,

 #Live-Map, #map {
       height: 100%;
        width: 100%;
     }
   /* Optional: Makes the sample page fill the window. */
     html, body {
     height: 100%;
     width: 100%;
     margin: 0;
     padding: 0;
}

<div style="Height:100%; Width:100%;" class="container-fluid">

score 0 · Answer 1 · answered Jan 28 '19 at 16:31

0

if the map is not visible during first presentation the map don't work .. in this case you could add the code for initMap direcly in you openCity function

    function openCity(evt, cityName) {

    var map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(60.378920, 24.741850),
          zoom: 7
        });

    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}

answered Jan 28 '19 at 16:31

ScaisEdge

131,976
10
91
107

This is and other methods are covered in the duplicate question. – Turnip Jan 28 '19 at 16:39
I commented the function in the code and updated openCity with your code but then it started showing error on line var infoWindow = new google.maps.InfoWindow; in browser 'Uncaught ReferenceError: google is not defined' – XCeptable Jan 28 '19 at 16:49
this mean that you some others reference to the map object .. you should rethink you solution starting to the fatc you have not a valid map at startup.. you must create a valid map objec in the function that render the page (tab) where there is the map – ScaisEdge Jan 28 '19 at 16:52
I was putting incomplete initMap() function inside openCity(). I put complete now, it's raising this error: Uncaught (in promise) Kc message: "initMap is not a function" name: "InvalidValueError" ..................... – XCeptable Jan 29 '19 at 15:31
You are calling initMap somewhere (could be in you google maps request) declaration .. you should remove the initMap call – ScaisEdge Jan 29 '19 at 15:34
initMap() is called with GoogleAPI key only: – XCeptable Jan 29 '19 at 16:03
if you don't show the map at the startup .. you don't need this call .. – ScaisEdge Jan 29 '19 at 16:04
But what about GoogleAPI key then ? Because I don't think maps will load without that. – XCeptable Jan 29 '19 at 16:38
You need the google maps API call ..just remove &callback=initMap – ScaisEdge Jan 29 '19 at 16:41
I tried that already but nothing happens. no error but no map in 'live map' tab content. – XCeptable Jan 29 '19 at 16:44
I don't know you code ,... if you have an initial map that show the map then use the initMap for render this inital map .. .. but remember that you you must recreate a valid map for each hiddend tab when you click for show .. – ScaisEdge Jan 29 '19 at 16:47
There is no initial map. The code that I put in EDIT is the complete code for Live Map tab. This all code is inside the div for the tabcontent. What I want is when tab is clicked, the map appears. – XCeptable Jan 30 '19 at 09:58
The problem basically was have to give the wrapper div also 100% height & width and also to the bootstrap container div. Because Google API requires these parameters to render, #Live-Map, #map { height: 100%; width: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; width: 100%; margin: 0; padding: 0; } – XCeptable Jan 30 '19 at 15:38
@scaisEdge: thank you for the nice help :-) – XCeptable Jan 31 '19 at 08:12
@XCeptable you are welcome .. – ScaisEdge Jan 31 '19 at 08:25

google maps not rendering in a nested div

1 Answers1