Your address will show here +12 34 56 78

Home Forums WP ESTATE – Real Estate WordPress Theme FORUM Property Google Maps – Change Height and Info Box size

This topic contains 0 replies, has 1 voice, and was last updated by  Anna 3 years, 11 months ago.

  • Author
    Posts
  • #4223

    Anna
    Keymaster

    This is the CSS line that modifies the map’s height:

    Line 4661 in style.css

    #googleMap {
    height: 590px;
    }

    If you know PHP and JS, you can edit the source files for Google Maps (located in JS/GOOGLE_JS) to make changes to the map.

    If you’re not, then you can play with this CSS line for INFO BOX size:

    .info_details {
    margin: 0px 0px 0px 0px;
    width: 670px;
    max-width: 670px;
    margin-top: -435px;
    position: absolute;
    background: #ffffff;
    box-shadow: 3px 5px 13px 0px rgba(29, 29, 29, 0.2);
    margin-left: -90px;
    }

    The details you play with are:

    width: 670px;
    max-width: 670px;
    margin-top: -435px;

    ————

    If you want to move the PIN on the map in a different position when the map opens, use this recommendations:

    The property page google map js is in

    wpestate/js/google_js/google_map_code_prop.js

    Line repsonsible is (around line ~165(

    map.panBy(380,vertical_pan);

    ————

    If you want to center images in the property slider (full), based on height, add this CSS line in child theme style.css:

    #pictureMap img {

    width: auto;
    height: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

    ————–

    Infobox default CSS

    .info_details {
    margin: 0px 0px 0px 0px;
    width: 670px;
    max-width: 670px;
    margin-top: -435px;
    position: absolute;
    background: #ffffff;
    box-shadow: 3px 5px 13px 0px rgba(29, 29, 29, 0.2);
    margin-left: -90px;
    }

    #infobox_title{
    font-size:30px;
    font-weight: 300;
    line-height: 1em;
    font-family: ‘Roboto’, sans-serif;
    color:#1a171b;
    padding:16px 0px 5px 20px;
    margin-bottom: 0px;
    float: left;
    }

    #infobox_title:hover,
    .info_details a:hover{
    color:#22be73;
    }

    .info_details .prop_details{
    width:100%;
    float:left;
    display:inline;
    font-size:24px;
    font-family: ‘Roboto’, sans-serif;
    font-weight: 300!important;
    color:#717374;
    padding:0px 0px 6px 0px;
    text-transform: lowercase;
    background-color: #fff;
    box-sizing: content-box;
    margin-bottom: 13px;
    }

You must be logged in to reply to this topic.