0
私のウェブページに地図を表示しようとしています。 私のウェブサイトでは、date-filterとdata-catの機能を使用しています。最初は地図を隠しています。 しかし、私は.submenu04 ul liをクリックすると地図がうまく表示されませんでした。ウェブページのサイズを変更するまで、Googleマップがうまく表示されませんでした
wrong display ただし、ウェブページのサイズを変更した後は正常になります。 after resize
他の質問で解決策が見つかりましたが、機能しませんでした。 Embed google map is wrong displayed until resizing webpage これを解決する方法はありますか？
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>ソリューション おかげ@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');
});
});
}
ここで重要なポイントは、Google Maps APIは高さと幅が固定されていない場合はマップを描画しないことです。あなたのケースでは、それは隠れて始まったので失敗しています。私はGoogleマップを使用したときに私はいくつかの同様の問題があった。私の提案は、あなたがそれを見せても地図を再描画することです。マップの初期化コードをもう一度呼び出すと、マップが再びレンダリングされます –
'google.maps.event.trigger（map、 'resize'）;'をmy fadeIn関数に置きます。そしてそれは動作します！ありがとう！ –