-1

I am trying to display a map in my webpage. In my website, I use date-filter and data-cat function.So I hide map at first. But my problem comes when I click the .submenu04 ul li,the map didn't display well.

wrong display But after I resize the webpage,it become normal. after resize

I found solutions in other questions,but it didn't work. Embed google map is wrong displayed until resizing webpage Is it a way to solve it?

var window_w, window_h;

function menuset(){

  var posts = $('.post');
  posts.hide();
$( ".submenu03 li" ).click(function() {

    // Get data of category
    var customType = $( this ).data('filter'); // category
    console.log(customType);
    console.log(posts.length); // Length of articles

    $('section.c').css({'display':'block'});
    $('.c').show();

    posts
    .hide()
    .filter(function () {
      return $(this).data('cat') === customType;
    })
    .fadeIn(200);




  });


}

function maps_set(){
   $('#map').css({'width':'500px','height':'500px'});
    google.maps.event.addDomListener(window, 'load', initialize);

    function initialize() {
      var mapOptions = {
        center: new google.maps.LatLng(25.08650, 121.535000),
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles:
        [
          {
           "featureType": "water",
            "elementType": "geometry",
            "stylers": [{"color": "#e9e9e9"},{"lightness": 17}]},
          {
           "featureType": "landscape",
           "elementType": "geometry",
           "stylers": [{"color": "#f5f5f5"},{"lightness": 20}]},
          {
           "featureType": "road.highway",
           "elementType": "geometry.fill",
           "stylers": [{"color": "#ffffff"},{"lightness": 17}]},
          {
           "featureType": "road.highway",
           "elementType": "geometry.stroke",
           "stylers": [{"color": "#ffffff"},{"lightness": 29},{"weight": 0.2}]},
          {
           "featureType": "road.arterial",
           "elementType": "geometry",
           "stylers": [{"color": "#ffffff"},{"lightness": 18}]},
          {
           "featureType": "road.local",
           "elementType": "geometry",
           "stylers": [{"color": "#ffffff"},{"lightness": 16}]},
          {
           "featureType": "poi",
           "elementType": "geometry",
           "stylers": [{"color": "#f5f5f5"},{"lightness": 21}]},
          {
           "featureType": "poi.park",
           "elementType": "geometry",
           "stylers": [{ "color": "#dedede"},{"lightness": 21}]},
          {
           "elementType": "labels.text.stroke",
           "stylers": [{"visibility": "on"},{"color": "#ffffff"},{"lightness": 16}]},
          {
           "elementType": "labels.text.fill",
           "stylers": [{"saturation": 36},{"color": "#333333"},{"lightness": 40}]},
          {
           "elementType": "labels.icon",
           "stylers": [{"visibility": "off"}]},
          {
           "featureType": "transit",
           "elementType": "geometry",
           "stylers": [{"color": "#f2f2f2"},{"lightness": 19}]},
          {
           "featureType": "administrative",
           "elementType": "geometry.fill",
           "stylers": [{"color": "#fefefe"},{"lightness": 20}]},
          {
           "featureType": "administrative",
           "elementType": "geometry.stroke",
           "stylers": [{"color": "#fefefe"},{"lightness": 17},{"weight": 1.2}]}
]
      };
      var map = new google.maps.Map(document.getElementById("map"),mapOptions);
      var marker_image = {
        url: "images/map_icon.png",
        size: new google.maps.Size(20, 33),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(-20, 33),
      };
      var main_Position = new google.maps.LatLng(25.0774235,121.5454867);
      var marker = new google.maps.Marker({
        position: main_Position,
        map: map,
        optimized: false,
        // size: new google.maps.Size(20, 32),
        icon: marker_image
      });
    }
}


$(function() {
  window_w = $(window).width();
  window_h = $(window).height();

  menuset();
  maps_set();


});
 @charset "UTF-8";
 /* CSS Document */
 html, body {
  margin: 0;
 }
 header{
  position: fixed;
 }
 section.c{
/*  display: none;*/
  margin: 90px 90px 0px 300px;
 }
  section.others{
/*  display: none;*/
  margin: 90px 90px 0px 300px;
 }
 .logo{
  position: fixed;
  top: 0px;
  left: 0px;
  padding: 30px 0 30px 90px;
  background-color: #fff;
  width: 100%;
  z-index: 7000;
 }
 .logo img{
  height: 30px;
  width: auto;
  cursor: pointer;
 }
  .menu{
    position: fixed;
    background-color: #fff;
    width: 200px;
    height: 100%;
    z-index: 9000;
    padding-left: 90px;
    padding-top: 0px;
    left: 0;
    opacity: 1;
  }
  .submenu03 ul{
    padding:0;
    margin: 0 0 30px 0;
  }
  .submenu03 ul li{
    list-style: none;
    font-size: 15px;
    line-height: 21px;
    cursor: pointer;
    font-weight:300;
  }
  .submenu03 ul li:hover{
    opacity: 0.5;

  }
  .submenu03 li a:link,.submenu03 li a:visited{
    text-decoration: none;
    color: #000;
    opacity: 1;
  }
  .menu_title{
   font-size: 20px;
   margin-bottom: 10px;
   line-height: 18px;
   font-weight: 500;
 }
.ci ul{
  padding: 0;
  margin: 0;
}
.ci ul li{
  list-style: none;
  font-size: 14px;
  padding-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<body>
<!--header-->
<header class="nav-down">
 <div class="logo">LOGO</div>
 <div class="menu">
      <div class="submenu03">
        <ul>
          <li data-filter="ar">show the map</li>
          <li data-filter="ot">show another page</li>
        </ul>
      </div>
 </div>
</header>
<section class="c">
  <div class="ar post" data-cat="ar">
    <div class="ci">
     <div id="map"></div>
    </div>
  </div>
</section>
<section class="others">
  <div class="ot post" data-cat="ot">
  this is another page.
  </div>
</section>
<div style="clear: both;"></div>
</body>

solution Thanks @Ma Yubo

function menuset(){

  var posts = $('.post');
  posts.hide();
$( ".submenu03 li" ).click(function() {

    // Get data of category
    var customType = $( this ).data('filter'); // category
    console.log(customType);
    console.log(posts.length); // Length of articles

    $('section.c').css({'display':'block'});
    $('.c').show();

    posts
    .hide()
    .filter(function () {
      return $(this).data('cat') === customType;
    })
    .fadeIn('200', function() {
  google.maps.event.trigger(map, 'resize');
});




  });


}
Community
  • 1
  • 1
Sandra Yuan
  • 3
  • 3
  • Sandra, the point here is that Google Maps API will not draw the map if it does not have a fixed height and width. In your case it is failing because it starts hidded. When I used google maps I had some similar issues. My suggestion is to render the map again when you show it. Call the map initialization code a second time to render the map again – Marcel Kohls Apr 22 '16 at 12:12
  • I put `google.maps.event.trigger(map, 'resize');` to my fadeIn function. And it works!!Thanks! – Sandra Yuan Apr 24 '16 at 13:51

2 Answers2

1
google.maps.event.trigger(map, 'resize');

add this code to your callback function of fadeIn,fadeOut,anything will change map size.

Ma Yubo
  • 215
  • 1
  • 10
  • I tried to put the same code at the end of `initialize()` or in `.submenu03 li` click function before, but it's not work. So this code should be placed in this position！！thank you very much! ! – Sandra Yuan Apr 24 '16 at 13:48
0

You shouldn't be hiding and showing your map based on conditions. You should only create the map when it needs to be shown or reinitialize it. Otherwise it renders the map initially when display is none but after changing it to block it doesn't show properly. I have faced this issue earlier.

Nikhilesh K V
  • 1,480
  • 13
  • 20