expresado
(Michal Hornák)
August 22, 2019, 10:34am
#1
Google maps api version 3.36+ is not working properly with actual charts module.
Default version 3.35
https://doc.cuba-platform.com/charts-7.0/charts.html#map_project_setup
is no longer available
Replication: create mapViewer in any screen, add infoWindow to map
Having same issue here,
Hopefully no need to upgrade cuba version,
gorelov
(Gleb Gorelov)
August 22, 2019, 12:28pm
#4
Hi,
Thank you for reporting the problem, I’ve created a GitHub issue .
Gleb
1 Like
Anyway my cuba platform version is 6.9.7 , my infowindow in mapviewer not show properly (close button disappear)
@gorelov : in my case, apparently cuba css class make infowindow not show properly
I try editing css class in map viewer using google chrome developer and show the difference below
gm-style-iw-cuba-root & gm-style-iw-cuba-close
(trouble)
replace css class #1 using original css class from google map
gm-style-iw-t & gm-style-iw gm-style-iw-c
@gorelov : how to change css for cuba mapviewer , can I do that by my self ?
gorelov
(Gleb Gorelov)
August 26, 2019, 10:47am
#9
Any CSS style can be altered in a theme extension, see doc .
@gorelov : Thanks but mapviewer doesn’t have stylename properties , so how to customize its style?
expresado
(Michal Hornák)
August 27, 2019, 3:59am
#11
finally, I could alter alter css class related to infowindow, by wrapping mapviewer component into csslayout and then set csslayout stylename with css class ( .infowindowmap) below
.infowindowmap {
.gm-style-iw-cuba-root {
position: absolute !important;
width: 100% !important;
}
.gm-style-iw-cuba-close {
position: absolute !important;
box-sizing: border-box !important;
overflow: hidden !important;
top: 0 !important;
left: 0 !important;
transform: translate(-50%, -100%) !important;
background-color: white !important;
border-radius: 8px !important;
padding: 12px !important;
box-shadow: 0 2px 7px 1px rgba(0, 0, 0, 0.3) !important;
}
.gm-style-iw-cuba-bubble-anchor-shadow {
box-sizing: border-box !important;
overflow: auto !important;
}
}
expresado
(Michal Hornák)
August 27, 2019, 7:47am
#13
You don’t have to wrap that in your infowindowmap class and csslayout with this style, you may just do this [halo-ext.scss]:
@mixin your_project-halo-ext {
.gm-style-iw-cuba-root {
position: absolute !important;
width: 100% !important;
}
.gm-style-iw-cuba-close {
position: absolute !important;
box-sizing: border-box !important;
overflow: hidden !important;
top: 0 !important;
left: 0 !important;
transform: translate(-50%, -100%) !important;
background-color: white !important;
border-radius: 8px !important;
padding: 12px !important;
box-shadow: 0 2px 7px 1px rgba(0, 0, 0, 0.3) !important;
}
.gm-style-iw-cuba-bubble-anchor-shadow {
box-sizing: border-box !important;
overflow: auto !important;
}
}
1 Like
Oh Oke nice , that is worked, just need restarting my cuba server
.gm-style-iw-cuba-root {
position: absolute !important;
width: 100% !important;
}
.gm-style-iw-cuba-close {
position: absolute !important;
box-sizing: border-box !important;
overflow: hidden !important;
top: 0 !important;
left: 0 !important;
transform: translate(-50%, -100%) !important;
background-color: white !important;
border-radius: 8px !important;
padding: 12px !important;
box-shadow: 0 2px 7px 1px rgba(0, 0, 0, 0.3) !important;
}
.gm-style-iw-cuba-bubble-anchor-shadow {
box-sizing: border-box !important;
overflow: auto !important;
}
.gm-style-iw-cuba-root::after{
background: white;
box-shadow: -2px 2px 2px 0 rgba(178,178,178,.4);
content: "";
height: 15px;
left: 0;
position: absolute;
top: 0;
transform: translate(-50%,-50%) rotate(-45deg);
width: 15px;
}
updated :
added element
.gm-style-iw-cuba-root::after