Development > Plugins

[SOLVED]Google maps with hide/show

<< < (3/10) > >>

SlicK:
And btw, why are you not using the toggle function? That code seems unnecesarily complicated.
Something as simple as this would work:

--- Code: ---<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
    <script src="http://code.jquery.com/jquery-latest.js"></script>

<title>Untitled 1</title>
</head>

<body>
<a href="#" class="map_show_hide" rel="#itemMap">Mapa</a>
<div class="test">
CONTENT
<script type="text/javascript">
<!--
$(document).ready(function(){
    $('.map_show_hide').click(function() {
        $('.test').toggle('slow');       
    });
});
-->
</script>

</div>

</body>
</html>
--- End code ---
And I think you should put the anchor text outside of your div so it doesn't get hidden when you hide the div conaining it.

TheDeadLives:
I´m using that code because i want that the text in the button changes. It s«changes from show map to hide map.

You can see what is happening in here: http://teste.goodluckwith.us/for-sale/animals/teste_i3

The map appears. Than you click show map, it closes. Then you close show map, it opens. And then everything works correctly (hide map appears and it closes the map and show map shows the map)

SlicK:
Change the text here: <div class="maptop_hidebtn"><a href="#" class="map_show_hide" rel="#maptop">Hide map</a></div>
Instead of Show map, initially write Hide map

SlicK:
Was curious and just tested this out. If you want to initially hide the map (I think it makes more sense this way), add display:none to your div.

--- Code: ---<div id="maptop" style="display:none;">
--- End code ---
And because this will lead to you need to change some more.
Basically, the map has to be loaded in a different way (page loads with div hidden, map not loaded. if user clicks on show, then show div and then load map (only once)).
So you need to cut and paste here and there, add this to a function:

--- Code: ---function showMyMap() {
            map = new google.maps.Map(document.getElementById("itemMap"), myOptions);
            geocoder = new google.maps.Geocoder();
            showAddress('Portugal');
        }
--- End code ---
Initialize this variable var mapInitialized=false;
And then add this to your showhide function:

--- Code: ---if(!mapInitialized) {
                mapInitialized=true;
                //window.alert('Show map first time (Once)!');
                showMyMap();
             }
--- End code ---

Final javascript code will look like this (gathered it all in one place as it was scattered throughout the HTML):

--- Code: ---<script type="text/javascript">
        var map = null;
        var geocoder = null;
     
        var myOptions = {
            zoom: 13,
            center: new google.maps.LatLng(37.4419, -122.1419),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            size: new google.maps.Size(480,240)
        }
     
        function showAddress(address) {
            if (geocoder) {
                geocoder.geocode( { 'address': address}, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        map.setCenter(results[0].geometry.location);
                        var marker = new google.maps.Marker({
                            map: map,
                            position: results[0].geometry.location
                        });
                        marker.setMap(map); 
                    } else {
                        $("#itemMap").remove();
                    }
                });
            }
        }
       
        function showMyMap() {
            map = new google.maps.Map(document.getElementById("itemMap"), myOptions);
            geocoder = new google.maps.Geocoder();
            showAddress('Portugal');
        }
       
        var mapInitialized=false;
       
        $(document).ready(function(){
   

   $('.map_show_hide').showHide({
speed: 1000,  // speed you want the toggle to happen
easing: '',  // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
changeText: 1, // if you dont want the button text to change, set this to 0
showText: 'Show map',// the button text to show when a div is closed
hideText: 'Hide map' // the button text to show when a div is open
});
});

    // ShowHide plugin                               
(function ($) {
    $.fn.showHide = function (options) {

//default vars for the plugin
        var defaults = {
            speed: 1000,
            easing: '',

        };
        var options = $.extend(defaults, options);

        $(this).click(function () {
           
             $('.toggleDiv').slideUp(options.speed, options.easing);
// this var stores which button you've clicked
             var toggleClick = $(this);
     // this reads the rel attribute of the button to determine which div id to toggle
     var toggleDiv = $(this).attr('rel');
     // here we toggle show/hide the correct div at the right speed and using which easing effect
     $(toggleDiv).slideToggle(options.speed, options.easing, function() {
     // this only fires once the animation is completed
             
             if(!mapInitialized) {
                mapInitialized=true;
                window.alert('Show map first time (Once)!');
                showMyMap();
             }
             
if(options.changeText==1){
     $(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
}
              });
   
  return false;
       
        });

    };
})(jQuery);
           

    </script>
--- End code ---
Sorry for the messy explanation and the messy code :P. I just wanted to test this out. If I'll use it myself, I'll add a clean version to the Google Maps plugin and share it on the forum.

TheDeadLives:
Thanks for your reply. But i would like to use my version, if it worked. I was thinking of using realstate theme, and other region i would display show map. If the user didn´t know where the region is, he would click show map and then the map would appear. Then we could close the map,and continue watch the ad.

Did you understood what i was thinking?

And i have tested your modification, the map never appears.

Navigation

[0] Message Index

[#] Next page

[*] Previous page

Go to full version