CODEWITHSUNDEEP
jqueryhtmlcssgoogle-mapsgoogle-api
Janaka Dombawela
Janaka Dombawela

Reputation: 1357

Google map api intigration with jquery slide has animation glitches

I have a google map inside a sliding div.

fiddle

When you first slide down the map you'll notice that a little glitch or animation getting jerky/clunky when you click. Any idea how to fix this? Any suggestions?

$(document).ready(function() {
  var mapCanvas = document.getElementById('map-canvas');
  var mapOptions = {
    center: new google.maps.LatLng(44.5403, -78.5463),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  $('.map-triangle').find('div').click(function() {
    $('.map-slide').slideToggle('slow');
    var map = new google.maps.Map(mapCanvas, mapOptions);
  });

});
.map-triangle {
  color: #ffffff;
  text-align: center;
  padding: 0 70px;
  z-index: 1;
}
.map-triangle > div {
  background: green;
  background-size: 100%;
  padding-bottom: 10px;
  padding-top: 4px;
  transition: all 0.5s ease;
}
.map-triangle > div:hover {
  /*cursor: pointer;*/
}
.map-anchor:hover > .map-triangle > div {
  background: red;
  background-size: 100%;
}
.map-slide {
  position: absolute;
  display: none;
  z-index: 1;
}
#map-canvas {
  width: 400px;
  height: 280px;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div class="container">
  <div class="col-lg-12 col-md-12" style="z-index: 2">
    <a href="#" class="map-anchor">
      <div class="map-triangle">
        <div>
          map
        </div>
      </div>
    </a>

  </div>
  <div class="col-lg-12 col-md-12 map-slide">
    <div id="map-canvas"></div>
  </div>
</div>

Help is really appreciated. Code snippet works too.

Upvotes: 0

Views: 415

Answers (1)

Dachi
Dachi

Reputation: 847

The reason of This bad animation is that u make animation and initialization of the map at the same time so it loads when animating. i added this in your code

 $('.map-triangle').find('div').click(function() {

var map = new google.maps.Map(mapCanvas, mapOptions);
  google.maps.event.addListenerOnce(map, 'idle', function(){
      $('.map-slide').slideToggle('slow', function(){
      google.maps.event.trigger(map, 'resize');
      });
  });

with this example you will see that animation is much better.

you are even reinitializing map when sliding up, you must not.

try to write slide down and slide up events, not toggle

Upvotes: 1

Related Questions