CODEWITHSUNDEEP
javascriptgoogle-maps
Ashish
Ashish

Reputation: 429

google map only loads half of its portion,i have used some extra javascript for some effects on the map but its only loading half

i have tried to use some hide/show functionality to my google map where a certain portion of the map is showed initially and after clicking on a button the whole map shows up.everything is working fine but when i click on the button and try to see the whole map,only half of the map shows up and the other half is covered with some gray color.here is the code

  <html>
    <head>
    <style> 

          #thediv {
        height: 100px;
        }
    </style>
    <body>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script type="text/javascript">

        function initialize() {

                                    var locations = [

                                      ['Nepcreation,sydney branch', -33.867487, 151.20699, 3],
                                      ['Nepcreation,kaulalampur branch', 3.140345, 101.689206, 2],
                                      ['Nepcreation,kathmandu', 27.689390, 85.335494, 1]
                                    ];

                                    var map = new google.maps.Map(document.getElementById('thediv'), {
                                      zoom: 2,
                                      center: new google.maps.LatLng(27.689390, 85.335494),
                                      mapTypeId: google.maps.MapTypeId.ROADMAP
                                    });

                                    var infowindow = new google.maps.InfoWindow();

                                    var marker, i;

                                    for (i = 0; i < locations.length; i++) {  
                                      marker = new google.maps.Marker({
                                        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                                        map: map
                                      });

                                      google.maps.event.addListener(marker, 'click', (function(marker, i) {
                                        return function() {
                                          infowindow.setContent(locations[i][0]);
                                          infowindow.open(map, marker);
                                        }
                                      })(marker, i));
                                    }
                                    }
                                    google.maps.event.addDomListener(window, 'load', initialize);
</script>

        <div id="thediv" class="reveal-closed"></div>   
                                  <input type="submit" onClick="gmap()">

        <script>
    function gmap(){

        var x=document.getElementById("thediv");

        if(x.style.height=="100px"){
        x.style.height="600px";}
        else{
            x.style.height="100px";
        }


    }
    </script>

        </body>
        </html>

Upvotes: 1

Views: 1014

Answers (1)

Praveen
Praveen

Reputation: 56509

This is a common problem faced by many users(including myself).

First you have initialized the Google maps within given dimension(auto x 100px), based on it the map images(called as tiles) are loaded into it.

Then based on the button 's click you're changing it dimension (auto x 600px) therefore the excess part of Google images are not rendered but showing only the grey area. In order to fix it what you have to do is to trigger the resize event as mentioned below

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

In your code, the map variable is scoped within the initialize() whereas the click event of button calls gmap(). So lets keep the map variable as global and then follow the below code:

function gmap() {
    var x = document.getElementById("thediv");
    if (x.style.height == "100px") {
        x.style.height = "600px";
    } else {
        x.style.height = "100px";
    }
    google.maps.event.trigger(map, "resize");
}

PS: In order to give a detailed explanation to this new user I have added this as my answer instead of marking it as duplicate.

Upvotes: 2

Related Questions