0

I am using google maps plugin .But problem is When i open the maps Tab in the page map is not visible and it becomes visible as soon as i scroll or move the map position .Can some one please help me out??

here is my code:

function initMap()
{
    var uluru = {lat: {{$activity->latitude}}, lng: {{$activity->longitude}}};
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 7,
        center: uluru
    });

    var marker = new google.maps.Marker({
        position: uluru,
        map: map
    });

    console.log("Loaded map");
    map.setZoom( this.map.getZoom() - 1 );
    map.setZoom( this.map.getZoom() + 1 );
    // google.maps.event.trigger(map, 'resize');
}

HTML:

<div class="tab-pane fade in" id="tabMap">
    <div id="mapWrapper" style="height:500px; width:100%;">
        <div id="map" style="height:100%;"></div>
    </div> 
</div>
Komal12
  • 3,340
  • 4
  • 16
  • 25
Shreyas Pimpalkar
  • 1
  • 2
  • Possible duplicate of [how to deal with google map inside of a hidden div (Updated picture)](http://stackoverflow.com/questions/4064275/how-to-deal-with-google-map-inside-of-a-hidden-div-updated-picture) – xomena Apr 23 '17 at 17:50
  • Can you please post a [minimal, complete, and verifiable example](https://stackoverflow.com/help/mcve)? It's hard to tell what could cause this behavior from the code snippets you submitted. – Stephen Michael Hammit May 01 '17 at 16:59