Google map not appearing when using php include and hide/show in jQuery

Question

I have create an html page containing google map and some text boxes. I have also created another page in which I have included this page using the include function in php.

<div id="map">
   <?php include 'myMap.html'; ?>
</div>

When the page is loaded the map and the other items are correctly loaded and displayed. Now I have created a button to toggle the visibility of the <div> within which the map has been included. Initially the map is hidden using the hide() function in jQuery. When I click in the button, the <div> should be visible again. to achieve this, I have called the show() method in jQuery. But when the button is clicked, everything is shown on the page, but the map is not showing up.

This part of the page in a different html page. When it is included it is displayed correctly but once hidden and button is clicked for it to show up again, the map becomes like in the picture. I tried a different approach and I have noticed that calling the function that loads the map at the time the button is called can help. Can I call that function found in another html file into the one in which it is included ?

Does it work fine without the include? I mean if you use the myMap.html directly, does behave as expected? — Sandeep Rajoria, Oct 31 '16 at 08:39
Don't create the JS map object on page load, only do it once the hidden div becomes visible — duncan, Oct 31 '16 at 09:01
Possible duplicate of [Google map comes partially, grey area comes instead of images from google server](http://stackoverflow.com/questions/3838580/google-map-comes-partially-grey-area-comes-instead-of-images-from-google-server) — André Dion, Oct 31 '16 at 12:30

score 0 · Answer 1 · answered Oct 31 '16 at 12:31

I'm guessing this is caused due to the fact that you're initially hiding the div. Therefore it has no height and when you toggle the visibility of the div it shows a container with a 0px height maps-container.

Try placing your Google Maps code in a function like initMap() or whatever you prefer to call it. After calling $('#your-div').show(); call initMap(). Like so:

$(document).on('click', 'button#your-button', function() { 
  $('div#your-div').show();
  initMap();
});

I think this will solve your issue. If not, you'll have to provide more code to better understand the issue.

The page having the map is in another folder(folder1/mapPage.html). In a different folder I have created another html page (folder2/mainPage.php). In that page, I am using the 'include' function in php to include the page having the map. In mainPage.php, I have the toggle button. I cannot call the initMap() from mapPage.html in mainPage.php — Mervyn, Dec 10 '16 at 21:28

Google map not appearing when using php include and hide/show in jQuery

1 Answers1