Load a google map only when user clicks on it

With this mod you will save some time and bandwidth when loading your page with Google map on it.

Note: This is a premium article. Downloadable files are payable.

This modification also works if you have moved your Google Map from widget to main screen under description of the ad.

Here is the post on how to move your map under description:
Moving Google map from widget to ad description

How does it work

Loading of Google map can be a pain in the as, especially because majority of users doesn’t need to see the map until they become interested in the item they are seeing.

You can see a working demo here.

This mod doesn’t use Classipress’s map module, but it uses gmap3 module.

This modification was tested Classipress 3.3.2., 3.3.3, 3.4.x and 3.5.x.

It is recommended to make a backup of files before making any changes.

Let’s get to work!

There are now more possibilities here:
1A – you haven’t moved your map under ad description
1B – you have moved your map under ad description

2B – map opens as animation

Step 1A

Open file sidebar-ad.php which is located in classipress folder.
Find this code:

<!--?php get_template_part( 'includes/sidebar', 'gmap' ); ?-->

and comment it out (it’s around line 35):

<!--?php //get_template_part( 'includes/sidebar', 'gmap' ); ?-->

Step 1B

Open file single-ad-listing.php which is located in classipress folder.

Find this code (it’s around line 150):

<!--?php include_once ( TEMPLATEPATH . '/includes/sidebar-gmap.php' ); ?-->

and comment it out:

<!--?php //include_once ( TEMPLATEPATH . '/includes/sidebar-gmap.php' ); ?-->

Step 2

Then add this code after:

<!--?php $make_address = get_post_meta($post-&gt;ID, 'cp_street', true) . '%2C' . get_post_meta($post-&gt;ID, 'cp_city', true) . '%2C' . get_post_meta($post-&gt;ID, 'cp_country', true);		
    $coordinates = cp_get_geocode( $post-&gt;ID );
?-->
    <script type="text/javascript">
    jQuery.noConflict();
    (function ($) {
        function readyFn() {
          $('#mapFrame').on('click', function() {
          $(this).html('<iframe rel="nofollow" width="100%" height="367" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="<?php echo home_url();?>/wp-content/themes/classipress/includes/cp_gmap3.php?mk_addr=<?php echo $make_address;?>&Lat=<?php echo $coordinates['lat'];?>&Lng=<?php echo $coordinates['lng'];?>"></iframe>');
          });
        }
        $(document).ready(readyFn); 
    })(jQuery);
    </script>

Step 2B

If you have decided to make it as a animated then add this code:

          $(this).animate({height:'365'}),

after this

          $('#mapFrame').on('click', function() {

Step 3

Open themes style.css and add this lines to the end of file:

#mapFrame {
	display:block;
	width:100%;
	height:365px; /* 30px; for animation  */
	background:url(images/map-frame.gif) no-repeat; /* remove for animation */
	cursor:pointer;
}
#mapFrame div#mapClk {
	margin:145px auto; /* 0px auto; for animation */
	width:300px;
	padding:4px;
	font-size:13px;
	letter-spacing:2px;
	color:#444;
	text-align:center;
	background:#fff;
}

Step 4

Save this file and extract it to classipress includes folder.

Now to summarize, the structure of your files should look like this:
Modified files:

classipress\style.css
classipress\single-ad-listing.php
or
classipress\sidebar-ad.php

Added files:

classipress\includes\cp_gmap3.php
classipress\includes\jquery-1.9.1.min.js
classipress\includes\gmap3.min.js
classipress\images\map-frame.gif
classipress\images\map_cluster.png

That’s it.

Version history

08/08/2014 – 1.3.0 – Option for animated opening of frame
07/18/2014 – 1.2.1 – Same version of routine, but made some changes in the manual
07/17/2014 – 1.2.1 – Fixed jQuery error when clicking on a map and added circle on a map
05/27/2014 – 1.1.0 – A few bug fixes
04/16/2014 – 1.0.0 – Initial version

If you find any issues with this tutorial, please be so kind and write a comment. I’ll try to help as much as I can.