Google Maps shows nothing until i minimize the screen

Question

On my website i have a Google Map but it don´t show the thing i want. When its loaded it shows this. Then i minimize my screen and it shows the map.

This is my code:

<div id="view1"> 
    <?php
        $location = get_field('locatie_beschrijving');
        if( ! empty($location) ):
    ?>
    <div id="map" style="width: 800px; height:300px "></div>
    <script src='http://maps.googleapis.com/maps/api/js?sensor=false' type='text/javascript'></script>
    <script type="text/javascript">
      //<![CDATA[
        function load() {
        var lat = <?php echo $location['lat']; ?>;
        var lng = <?php echo $location['lng']; ?>;
    // coordinates to latLng
        var latlng = new google.maps.LatLng(lat, lng);
    // map Options
        var myOptions = {
        zoom: 9,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
       };
    //draw a map
        var map = new google.maps.Map(document.getElementById("map"), myOptions);
        var marker = new google.maps.Marker({
        position: map.getCenter(),
        map: map
       });
    }
    // call the function
       load();
    //]]>
    </script>
</div>

Anyone an idea what's wrong?

this might help http://stackoverflow.com/questions/3838580/google-map-comes-partially-grey-area-comes-instead-of-images-from-google-server — BenG, Jan 05 '16 at 08:43
Hmm yes i think it is what i need. Because it's too in tabs. But any idea how i incorpate 'google.maps.event.trigger(map, 'resize');' ? — Nick de Koning, Jan 05 '16 at 09:03
Do you use any library for the tabs? Like Bootstrap or something? Do you know if you have events available? — MrUpsidown, Jan 05 '16 at 15:24
I use Bootstrap indeed. I don´t know or events are available.. — Nick de Koning, Jan 06 '16 at 09:13

score -1 · Accepted Answer · edited Jun 20 '20 at 09:12

The key is that your map is hidden when initialized and therefore, you need to trigger a resize event once the tab has been shown.

google.maps.event.trigger(map, "resize");

Developers should trigger this event on the map when the div changes size.

Bootstrap tabs

This library exposes events:

Events

When showing a new tab, the events fire in the following order:

hide.bs.tab (on the current active tab)

show.bs.tab (on the to-be-shown tab)

hidden.bs.tab (on the previous active tab, the same one as for the hide.bs.tab event)

shown.bs.tab (on the newly-active just-shown tab, the same one as for the show.bs.tab event)

This way, you have full control over what happens with your tabs. You know when it's shown, hidden, etc.

So you could use something like that (with jQuery):

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  // Trigger map resize when tab is shown
  google.maps.event.trigger(map, "resize");
});

This will trigger the resize event when the tab has been shown.

Make sure the map object is available where you place this code.

score -2 · Answer 2 · answered Jan 05 '16 at 09:57

-2

Use below coding

google.maps.event.addDomListener(window, "resize", resizingMap());

function resizingMap() {
 if(typeof map =="undefined") return;
 var center = map.getCenter();
 google.maps.event.trigger(map, "resize");
 map.setCenter(center); 
 }

answered Jan 05 '16 at 09:57

msvairam

862
5
12

I put it in map.js but it don't work. Or do i need to paste it elsewhere? – Nick de Koning Jan 05 '16 at 11:30
this coding put in below load() function – msvairam Jan 05 '16 at 11:32
are you mention API key in js link ? – msvairam Jan 05 '16 at 12:28

Google Maps shows nothing until i minimize the screen

2 Answers2