Where do i insert - google.maps.event.trigger(map, 'resize');

StackOverflow https://stackoverflow.com/questions/23593799

Question

After searching through, Lot of people have suggest to use this google.maps.event.trigger(map, 'resize'); solution for hidden div, google map to render properly.As of now, only one third of map display and rest are greyed out.i have try inserting this code in each line to check. nothing work. Can some help me out.. am clueless !! this is my js 

$("#1").on("click",function(){
            var map;
     mapProp = { center:new google.maps.LatLng(40.73, -74.1841),
     zoom:17,
     mapTypeId:google.maps.MapTypeId.ROADMAP
      };

    map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

    mapProp = new google.maps.LatLng(40.73, -74.1841)

     var marker = new google.maps.Marker({
     position: mapProp,
     map: map,
     icon: 'img/marker.png',

     });

      marker.setMap(map);
     });
google.maps.event.addDomListener(window, 'load');

this is my html 

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />


    <link rel="stylesheet" type="text/css" href="css/direction.css"/>
    <link rel="stylesheet" type="text/css" href="css/transitions.css"/>

    <script type="text/javascript" src="js/jquery.js"></script>
     <script type="text/javascript" src="css/transitions.js"></script>

    <script type="text/javascript" 
    src="https://maps.googleapis.com/maps/apijs?v=3.exp&sensor=false"></script>


</head>
<body>

   <div id="Home">

<div id="picture"> <img src="img.jpg"  alt="logo"> </img></div>     

<label><div id="select">Select</label></div>
 <ul id="list"><hr>
    <li id="b1" >Mall</li><hr>
    <li id="b2" > city</li><hr>
        <li id="b3" > office</li><hr>
     <li id="b4" >Park</li><hr>
     <li id="b5" >school</li><hr>
         <li id="b6" > theater</li><hr>
    </ul>

</div>

<div id="showmap">
        <div  class="back" id="Back">Back to Names</div>
   <div id="googleMap"> </div>

</div>

        <script type="text/javascript" src="js/scripts.js"></script>
  </body>

</html>

solution @ Andrei Beziazychnyi

UpDate This solve everything

 google.maps.event.addListener(map, "idle", function(){
            var center = map.getCenter();
            google.maps.event.trigger(map, 'resize'); 
            map.setCenter(center);

            });

After : 

marker.setMap(map);

Only problem with is, my locaction is little off. had to bring down to see the marker.

Was it helpful?

Solution

Best option I know is to use following code:

google.maps.event.addListenerOnce(map, 'idle', function() {
  google.maps.event.trigger(map, 'resize');
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top