• 1dnmr
    May 15, 2015 at 1:41 pm #108636

    Hi,

    If not only me dreamed move map to page bottom to have BOTH: beautiful slider on top and map, here is the solution:

    1. Copy google_maps_base.php to child theme templates and rename it to “google_maps_property.php” for example. Change google maps control class name (I renamed it to “gmap-controls-property”) and also delete unnecessary code. The result can be like this:

    <!-- Google Map -->
    <?php
    global $post;
    
    if( isset($post->ID) ){
        $gmap_lat           =   esc_html( get_post_meta($post->ID, 'property_latitude', true));
        $gmap_long          =   esc_html( get_post_meta($post->ID, 'property_longitude', true));
        $property_add_on    =   ' data-post_id="'.$post->ID.'" data-cur_lat="'.$gmap_lat.'" data-cur_long="'.$gmap_long.'" ';
    }
    ?>
    
    <div id="gmap_wrapper"  <?php print $property_add_on; ?> style="height:450px"  >
        <div id="googleMap"  style="height:100%">   
        </div>    
           
       <div class="tooltip"> <?php _e('click to enable zoom','wpestate');?></div>
       
       
       <div id="gmap-noresult">
           <?php _e('We didn\'t find any results','wpestate');?>
       </div>
       
       <div class="gmap-controls-property">
            <div id="gmap-control">
                <span  id="map-view"><i class="fa fa-picture-o"></i><?php _e('View','wpestate');?></span>
                    <span id="map-view-roadmap"     class="map-type"><?php _e('Roadmap','wpestate');?></span>
                    <span id="map-view-satellite"   class="map-type"><?php _e('Satellite','wpestate');?></span>
                    <span id="map-view-hybrid"      class="map-type"><?php _e('Hybrid','wpestate');?></span>
                    <span id="map-view-terrain"     class="map-type"><?php _e('Terrain','wpestate');?></span>
                <span  id="geolocation-button"><i class="fa fa-map-marker"></i><?php _e('My Location','wpestate');?></span>
    
                <?php
                    $street_view_class=" ";
                    if(  get_option('wp_estate_show_g_search','') ==='yes'){
                        $street_view_class=" lower_street ";
                ?>
                <?php        
                    }
                ?>
            </div>
    
            <div id="gmapzoomplus"><i class="fa fa-plus"></i> </div>
            <div id="gmapzoomminus"><i class="fa fa-minus"></i></div>        
       </div>
    </div>    
    <!-- END Google Map --> 
    

    2. Add google map to footer for estate_property custom post type. Copy footer.php to your child theme and add several lines of code above line “if (!is_page_template(‘property_list_half.php’) ){“:

    if (is_single( get_the_ID() ) && ('estate_property' == get_post_type( get_the_ID() ) )) {
            get_template_part('templates/google_maps_property');         
    }
    

    3. Set css for new map control to display map controls properly:

    .gmap-controls-property {
      position: relative;
      float: left;
      width: 355px;
      top: -450px;
      left: 0px;
      pointer-events: none;
    }

    Cheers

    • This topic was modified 2 years ago by  Anna.
    Anna
    May 18, 2015 at 7:19 am #108741

    Thank you for deciding to share your solution with other clients. That’s very kind of you. Anna

    raph7433
    July 1, 2015 at 12:15 pm #113733

    Hello,

    Thx a lot for this tip. Hope 1dnmr or you Anna can answer me : . I did all explained above. It works fine, excepted that i can’t zoom or click on the google map. I can’t use the “minus” and “plus” to zoom in or to zoom out. Nothing happens. I can surf with little hand when i click on the map, but once again, i can’t zoom in or out, no matter what i try.

    NB : i do not use child theme (i know i should…)

    Thx a lot,

    Raphaël

    1dnmr
    July 1, 2015 at 12:30 pm #113736

    Please recheck again

    google_maps_property.php

    `<!– Google Map –>
    <?php
    global $post;

    if( isset($post->ID) ){
    $gmap_lat = esc_html( get_post_meta($post->ID, ‘property_latitude’, true));
    $gmap_long = esc_html( get_post_meta($post->ID, ‘property_longitude’, true));
    $property_add_on = ‘ data-post_id=”‘.$post->ID.'” data-cur_lat=”‘.$gmap_lat.'” data-cur_long=”‘.$gmap_long.'” ‘;
    }
    ?>

    <div id=”gmap_wrapper” <?php print $property_add_on; ?> style=”height:450px” >
    <div id=”googleMap” style=”height:100%”>
    </div>

    <div class=”tooltip”> <?php _e(‘click to enable zoom’,’wpestate’);?></div>

    <div id=”gmap-noresult”>
    <?php _e(‘We didn\’t find any results’,’wpestate’);?>
    </div>

    <div class=”gmap-controls-property”>
    <div id=”gmap-control”>
    <span id=”map-view”><i class=”fa fa-picture-o”></i><?php _e(‘View’,’wpestate’);?></span>
    <span id=”map-view-roadmap” class=”map-type”><?php _e(‘Roadmap’,’wpestate’);?></span>
    <span id=”map-view-satellite” class=”map-type”><?php _e(‘Satellite’,’wpestate’);?></span>
    <span id=”map-view-hybrid” class=”map-type”><?php _e(‘Hybrid’,’wpestate’);?></span>
    <span id=”map-view-terrain” class=”map-type”><?php _e(‘Terrain’,’wpestate’);?></span>
    <span id=”geolocation-button”><i class=”fa fa-map-marker”></i><?php _e(‘My Location’,’wpestate’);?></span>

    <?php
    $street_view_class=” “;
    if( get_option(‘wp_estate_show_g_search’,”) ===’yes’){
    $street_view_class=” lower_street “;
    ?>
    <?php
    }
    ?>
    </div>

    <div id=”gmapzoomplus”><i class=”fa fa-plus”></i> </div>
    <div id=”gmapzoomminus”><i class=”fa fa-minus”></i></div>
    </div>
    </div>
    <!– END Google Map –>


    2. Footer.php

    <?php
    if (is_single( get_the_ID() ) && (‘estate_property’ == get_post_type( get_the_ID() ) )) {
    get_template_part(‘templates/google_maps_property’);

    // get_template_part (‘/templates/similar_listings’);
    }
    ?>

    3. CSS

    .gmap-controls-property {
    position: relative;
    float: left;
    width: 355px;
    top: -450px;
    left: 0px;
    pointer-events: none;
    }

    Live example here http://www.villasonsamui.ru/properties/baan-phuttarak/

    raph7433
    July 1, 2015 at 1:31 pm #113750

    Thx a lot for your answer. I see that it works fine for you. Not for me 🙁

    I did exactly what you said, but now the map does not appear at all. I replaced css in “custom css” fields. I added what you told me to in footer.php and copied paste the google_maps_property.php content (i renamed the old one)

    I have by the a php error that may explain this. The following lines have error, according to dreamweaver :
    1. $street_view_class=” lower_street “;
    2. <div id=”gmapzoomplus”><i class=”fa fa-plus”></i> </div>
    3. <div id=”gmapzoomminus”><i class=”fa fa-minus”></i></div>

    The error is “”dynamically-related files cannot not be discovered because there is no site definition for this document”

    Thx again for your help

    raph7433
    July 1, 2015 at 1:50 pm #113754

    I add that it is not just the map not showing, it is the whole footer (footer widgets. on your site for example, all the area with copyright, know us better, social networks etc).

    Thx !

    1dnmr
    July 1, 2015 at 3:07 pm #113761

    Sorry, men, I not remember all the details already -)
    I’m actually work under debugger NetBeans+xDebugger on my local machine to debug php code and use Chrome developer tools for debugging javascript and css.

You must be logged in to reply to this topic.

Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.