I'm trying to use gmaps.js to place a map within a particular slideshow slide. However, when checking the site locally using Chrome Dev Tools, the size of the div indicates that the map is 0px in height and width. The parent div containers all specify a height and width as a percent and the map div itself also has percentages for height and width. I've been using a online website creation software called Froont where the slideshow was created with 4 slides as follows:
HTML (the code has been truncated for brevity):
<head>
<meta charset="UTF-8">
<link rel="schema.DC" href="http://ift.tt/mToXri">
<title>flows_index</title>
...
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/style.css">
...
<script src="http://ift.tt/UE5hJi"></script>
<script src="vendor/hpneo-gmaps-0.4.17-0-gad937e4/hpneo-gmaps-ad937e4/gmaps.js"></script>
<style type="text/css">
#map {
width: 400px;
height: 400px;
}
#maptest {
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div class="b-content">
<div id="fr_54ddaabcc1cd766e4a0001b8" class="fr-widget fr-container fr_main">
<!--
--><div id="fr_54ddadd2c1cd766e4a0001ce" class="fr-widget fr-container fr_content">
<div id="fr_54ddb0c7c1cd766e4a0001de" class="fr-widget fr-container fr_container_4">
<!--
--><div id="fr_54ebb42476ae113ae400006a" class="fr-widget fr-slideshow swiper-container fr_slideshow" data-slideshow-autoplay="6000" data-slideshow-dots="true">
<div class="swiper-wrapper"></div><!--
--><div id="fr_54ebb42476ae113ae4000073" class="fr-widget fr-img fr_left_arrow">
<img src="images/thumbnail/arrow-left.png_70x80.png" />
</div><!--
--><div id="fr_54ebb42476ae113ae4000071" class="fr-widget fr-img fr_right_arrow">
<img src="images/thumbnail/arrow-right.png_70x80.png" />
</div><!--
--><div id="fr_54ebb42476ae113ae400006f" class="fr-widget fr-container fr_slide_1">
<div id="fr_54ee974bc1cd76293700000d" class="fr-widget fr-container fr_apimap_container">
<div id="map" class="fr-widget fr-container fr_map_canvas">
<script>
var map = new GMaps({
div: '#map',
lat: -12.043333,
lng: -77.028333
});
</script>
</div>
</div>
</div><!--
--><div id="fr_54ebb42476ae113ae400006d" class="fr-widget fr-container fr_slide_2">
<div id="fr_54ee454cc1cd766f3c000039" class="fr-widget fr-img fr_image_5">
<img src="images/thumbnail/figure-1_1.png_5694x3744.png" />
</div>
</div><!--
--><div id="fr_54ee45bdc1cd766f3c00003e" class="fr-widget fr-container fr_slide_3">
</div><!--
--><div id="fr_54ee45c5c1cd766f3c000045" class="fr-widget fr-container fr_slide_4">
</div>
<div class="fr-slideshow-dots" style="display:block;">
<span class="swiper-pagination-switch swiper-active-switch"></span>
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch"></span>
</div>
</div>
<div id="maptest">
<script>
var maptest = new GMaps({
div: '#maptest',
lat: -12.043333,
lng: -77.028333
});
</script>
</div>
</div>
</div>
</div>
</div>
</body>
CSS (pretty extensive so I just included the relevant div classes):
.fr_slide_1 {
float: none;
display: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
background-position: center center;
background-size: cover;
position: absolute
}
.fr_slideshow {
float: none;
display: block;
width: 100%;
height: 500px;
vertical-align: top;
margin-top: 2em;
position: relative;
min-height: 340px;
max-width: 1024px
}
.fr_slideshow .fr-slideshow-dots .swiper-pagination-switch {
background-color: black
}
.fr_left_arrow {
display: block;
top: 50%;
width: 35px;
vertical-align: top;
margin-top: 0;
margin-right: auto;
margin-left: 1em;
position: absolute;
z-index: 5;
cursor: pointer;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%)
}
.fr_right_arrow {
display: block;
top: 50%;
width: 35px;
vertical-align: top;
margin-top: 0;
margin-right: 1em;
margin-left: 0;
position: absolute;
right: 0;
z-index: 5;
cursor: pointer;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%)
}
.fr_apimap_container {
float: none;
display: block;
width: 90%;
height: 93%;
margin-right: auto;
margin-left: auto
}
.fr_map_canvas {
float: none;
display: block;
width: 100%;
height: 100%;
margin-right: auto;
margin-left: auto
}
So far I've tried renaming the slide id from an original automated id (as shown here) but the stylesheet specification of the element id doesn't seem to override the class style. Also, there is an additional test gmaps.js map in here which actually does work so I know it isn't the javascript implementation. Any ideas on how to get the map api to display as a slide?
Aucun commentaire:
Enregistrer un commentaire