15. customized popup

previous
next

Most map plugins don’t let you customize the popup window of a marker (in fact Google Maps features are not very friendly with this). But after you install this map plugin, you can customize the popup with a CSS code added to your website. For instance, I customized the popup in the above map with this simple CSS code:

<style>
.gm-style-iw {
    background-color: #2D2D2D !important;
    margin-top: -8px !important;
    margin-left: -15px !important;
    height: 96% !important;
    text-align: center !important;
    padding: 15px 15px 0 15px !important;
}
.gm-style-iw, .gm-style-iw a:active, .gm-style-iw a:hover, .gm-style-iw a:link, .gm-style-iw a:visited {
    color: #E9F3DA !important;
}
div.responsive-map div div div div div div div div div div {
    background-color: #2D2D2D !important;
}
</style>
previous
next