CODEWITHSUNDEEP
jquerygoogle-mapsanimationgoogle-maps-api-3
Yahya Uddin
Yahya Uddin

Reputation: 23

Google maps don't render properly when visibility initially set to hidden

I have inserted google maps in a animated website, which must make use of the display: hidden property and sliding effects using jquery, but the map does not display properly. You will find that the map is off-center. Please help!!!

EDIT: The code below has been edited so that it now displays correctly (thanks to Salman) but now it's no longer shows at the centre of the marker. the map.setCenter(myLatlng) did not not work either. 

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
    var map //NEW!
    var myLatlng = new google.maps.LatLng(52.518903284520796,-1.450427753967233);
    function initialize() {
        var mapOptions = {
            zoom: 13,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); //NEW!(SMALL EDIT)

        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Beauty Courses 4 U',
            icon: 'http://www.google.com/intl/en_us/mapfiles/ms/micons/pink-dot.png'
        });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<style>
#menu {display: none;}
.sliderContainer {
position: relative;
overflow: hidden;
width: 300px;
height: 300px;
}
.sliderViewer {
position: absolute;
left: 0px;
overflow-x: hidden;
width: 900px;
height: 300px;
}
.sliderViewer>div {
width: 300px;
height: 300px;
float: left;
overflow: hidden;
}
#map_canvas {
width: 200px;
height: 200px;
margin: 0 auto 0 auto;
}
.sliderViewer>div:nth-child(1) {background: red;}
.sliderViewer>div:nth-child(2) {background: yellow;}
.sliderViewer>div:nth-child(3) {background: blue;}
a {cursor: pointer;}
</style>
<body>
<a id="showMenu">Show menu (click here)</a>
<div id="menu">
<ul>
<li id="link1"><a>link1</a></li>
<li id="link2"><a>link2 (click on this link)</a></li>
<li id="link3"><a>link3</a></li>
</ul>
<div class="sliderContainer">
<div class="sliderViewer">
      <div>some conetent in panel 1</div>
      <div>The map is off center:
      <div id="map_canvas"></div></div>
      <div>some conetent in panel 3</div>
</div>
</div>
</div>
</body>
<script>
$( document ).ready(function(){
    $('#showMenu').on('click', function(){
        $('#menu').show(500);
    })
    $('#link1').on('click',function(){
        $('.sliderViewer').animate({left: 0}, 1000);
        })
    $('#link2').on('click',function(){
        $('.sliderViewer').animate({left: -300}, 1000);
                    google.maps.event.trigger(map, 'resize'); //NEW!
                    map.setCenter(myLatlng); //NEW!
    })
    $('#link3').on('click',function(){
        $('.sliderViewer').animate({left: -600}, 1000);
    })
 });
 </script>
 </html>

Upvotes: 1

Views: 3638

Answers (3)

Mir Shakeel Hussain
Mir Shakeel Hussain

Reputation: 517

google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
    google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
            google.maps.event.trigger(map, 'resize');

    });
});

Upvotes: 0

Salman
Salman

Reputation: 3726

You need to trigger map resize event when you actually display the map.

$('#link2').on('click',function(){
    $('.sliderViewer').animate({left: -300}, 1000);
    google.maps.event.trigger(map, 'resize')
})

However this won't work unless you make the map variable global. So you can start off like this:

var map;
function initialize() {
    // init codes
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

Upvotes: 6

Tamilarasan
Tamilarasan

Reputation: 36

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" 
src="https://maps.google.co.in/maps?q=chennai&amp;ie=UTF8&amp;hq=&amp;hnear=Chennai,+Tamil+Nadu&amp;ll=13.052414,80.250825&amp;spn=0.991302,1.674042&amp;t=m&amp;z=10&amp;output=embed">
</iframe>
<br/>
<small>
<a href="https://maps.google.co.in/maps?q=chennai&amp;ie=UTF8&amp;hq=&amp;hnear=Chennai,+Tamil+Nadu&amp;ll=13.052414,80.250825&amp;spn=0.991302,1.674042&amp;t=m&amp;z=10&amp;source=embed" style="color:#0000FF;text-align:left">
View Larger Map</a>
</small>

u can use this map in html code............

Upvotes: 0

Related Questions