CODEWITHSUNDEEP
jqueryhtmlcssgoogle-mapsgoogle-api
Janaka Dombawela
Janaka Dombawela

Reputation: 1357

Google Maps is not loading completely

fiddle here so it is much more easier

I have a slide div to reveal google maps when a button click which I integrated using Google API.

My question is: if you click the button the maps loads correctly. but after that if you hide the map by clicking again on the button and view it again by clicking the button the map doesn't load correctly. any idea how to fix this? help is really appreciated.

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

$(document).ready(function() {
  $('.map-triangle').find('div').click(function() {
    $('.map-slide').slideToggle('slow', initialize());
  });


  //google.maps.event.addDomListener(window, 'load', initialize);
});
.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>

PS: snippet also working

Upvotes: 1

Views: 485

Answers (1)

Eko Junaidi Salam
Eko Junaidi Salam

Reputation: 1681

In your case, you need to refresh var map after it slideToggle. If not you'll got trouble resize of your map into disposition. So to solve that you need place var map = new google.maps.Map(mapCanvas, mapOptions); after your slideToggle.

Please check this out. Hope it will help you :)

$(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>

Upvotes: 1

Related Questions