Gmap3 - Forum

Gmap3 exchange platform

You are not logged in.

Ads
(server costs 27.50€ per month)


#1 2012-02-29 21:16:39

johnnylo
Member
Registered: 2012-01-23
Posts: 7

multiple maps in tab content

I'm trying to init 2 maps on a page in tabs that hide and unhide via CSS.  I want to let user switch between maps with different nav menu without having to reload the page. 

I got this in HTML

    <li><a href="#map_wrap">Map1</a></li>
    <li><a href="#map_wrap2">Map2</a></li>

    <section id="map_wrap">
    <div id="map_canvas" class="gmap map1"></div></section>

    <section id="map_wrap2">
    <div id="map_canvas2" class="gmap map2"></div></section>

In the js file, I got

function initmap() {
    $('.gmap').gmap3(
        { action: 'init',
            options: { MyOptions
            }
        }
    );
}

What happen is that only one map looks normal.  The other one would not show itself properly.  Only a corner of it can be seen.  Like the tile is out of place.  Minimizing and Restoring the Browser window would refresh the "foreground" map to normal but then the other one would screw up when I switch.

Any idea?

Last edited by johnnylo (2012-02-29 21:39:16)

Offline

Ads
(server costs 27.50€ per month)


#2 2012-03-01 09:54:22

stephen_
Member
Registered: 2012-02-29
Posts: 5

Re: multiple maps in tab content

I too have a similar problem where the top right tile shows the map and the rest of the container for the map is grey. This is primary down to the tab set up.

Did you check Jquery Tabs for more info?

This is the script I'm using...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="_LANGUAGE" xml:lang="_LANGUAGE">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Jquery CSS Tabs and V3 Google Maps</title>

    <script type="text/javascript" src="../jquery/jquery-1.4.4.min.js"></script>            
    <script type="text/javascript" language="javascript">
<!--
$(document).ready(function() {
	//Default Action
	$(".tab_content").hide();
	$("ul.tabs li:first").addClass("active").show(); 
	$(".tab_content:first").show(); 
	
	//On Click Event
	$("ul.tabs li").click(function() {
		$("ul.tabs li").removeClass("active");
		$(this).addClass("active"); 
		$(".tab_content").hide(); 
		var activeTab = $(this).find("a").attr("href"); 
		$(activeTab).fadeIn();
		if(activeTab == '#tab2') {      
			$(window).resize(function(){
			//$("#tab2").css({'display':'block'});
			//$("#map_canvas").css({'width':'630px', 'height':'400px'});
			//initialize();
			//alert('Changed!');
			}); 
    		}
		return false;
	});
});
-->
</script>
<link rel="stylesheet" href="http://flintmaker.com/sandpit/style.css?v=06042011" type="text/css" media="screen" />
<style type="text/css" media="screen">
<!--
/* Tabbed interface */
.container {width: 670px; margin: 10px auto;}
ul.tabs {margin: 0;padding: 0;float: left;list-style: none;height: 32px;border-bottom: 1px solid #c0c0c0;border-left: 1px solid #c0c0c0;width: 100%;}
ul.tabs li {float: left;margin: 0;padding: 0;height: 31px;line-height: 31px;border: 1px solid #c0c0c0;border-left: none;margin-bottom: -1px;background: #e0e0e0;overflow: hidden;position: relative;}
ul.tabs li a {text-decoration: none;color: #000;display: block;padding: 0 20px;border: 1px solid #fff;outline: none;}
ul.tabs li a:hover {background: #ccc;}	
html ul.tabs li.active, html ul.tabs li.active a:hover  {background: #fff;border-bottom: 1px solid #fff;}
.tab_container {	border: 1px solid #c0c0c0;border-top: none;clear: both;float: left; width: 100%;background: #fff;
-webkit-border-radius: 0px 0px 5px 5px;-moz-border-radius: 0px 0px 5px 5px;border-radius: 0px 0px 5px 5px;}
.tab_content {padding: 20px;}
.tab_content h2 {padding-bottom: 10px;border-bottom: 1px dotted #ddd;}
.tab_content h3 a{color: #254588;}
/* Google map */

.gmap3{border: 1px dashed #C0C0C0;width: 630px;height: 400px;}
</style>
</head>
<body>
<div class="container">
	<h1>Simple Jquery CSS Tabs and V3 Google Maps</h1>

    <ul class="tabs">
    <li><a href="#tab1">About</a></li>
    <li><a href="#tab2" id="showMap">Map</a></li>
    <li><a href="#tab3">Contact</a></li>
    </ul>
<!-- Start tab container -->
<div class="tab_container">

    <div id="tab1" class="tab_content">
            <h2>About</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

    <div id="tab2" class="tab_content">
    <h2>Google Map</h2>

    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script type="text/javascript" src="../gmap3.js"></script> 
    <script type="text/javascript">
//<![CDATA[
    $(document).ready(function() {
        $('#map_canvas')
          .gmap3(
          { action:'init',
            options:{
              center:[46.578498,2.457275],
              zoom: 5
            }
          },
          { action: 'addMarkers',
            markers:[
              {lat:48.8620722, lng:2.352047, data:'Paris !'},
              {lat:46.59433,lng:0.342236, data:'Poitiers : great city !'},
              {lat:42.704931, lng:2.894697, data:'Perpignan ! <br> GO USAP !'}
            ],
            marker:{
              options:{
                draggable: false
              },
              events:{
                mouseover: function(marker, event, data){
                  var map = $(this).gmap3('get'),
                      infowindow = $(this).gmap3({action:'get', name:'infowindow'});
                  if (infowindow){
                    infowindow.open(map, marker);
                    infowindow.setContent(data);
                  } else {
                    $(this).gmap3({action:'addinfowindow', anchor:marker, options:{content: data}});
                  }
                },
                mouseout: function(){
                  var infowindow = $(this).gmap3({action:'get', name:'infowindow'});
                  if (infowindow){
                    infowindow.close();
                  }
                }
              }
            }
          }
        );
        $('#example').bind('tabsshow', function(event, ui) {
    if (ui.panel.id == "map-tab") {
        resizeMap();
    }
});
        // Function added to help reset map and container boundaries
        $("#showMap").click(function() {
        $("#tab2").css({'display':'block'});
        $("#map_canvas").css({'width':'630px', 'height':'400px'});
        initialize();
        //alert('showMap Clicked!');
        });
        
     initialize(); 

});
//]]>
    </script>

    <div id="map_canvas" class="gmap3"></div>

    
    </div>

    <div id="tab3" class="tab_content">
		<h2>Contact</h2>

    </div>

    
</div>
<!-- End tab container -->

<!-- Back Home Footer -->
<div style="clear: both; display: block; padding: 10px 0; text-align:center;">
<div class="backtohome">
<p><a href="http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery">Simple Tabs w/ CSS &amp; jQuery</a> by Soh Tanaka. | 
<a href="http://flintmaker.com">&laquo; Back to Flintmaker</a>
</p>
</div>

</div>
<!-- end back home Footer -->

</div>



</body>
</html>

Offline

#3 2012-03-01 13:43:30

charlietfl
Moderator
Registered: 2011-11-24
Posts: 201

Re: multiple maps in tab content

Browsers have difficult time getting dimensions of elements in a hidden container and maps need dimensions in order to render. One simple fix is not hide the containers, rather move them offscreen with css.

Alternately, trigger the map resize after a hidden element is displayed.
http://gmap3.net/forum/viewtopic.php?id=41

Offline

#4 2012-03-01 14:03:23

stephen_
Member
Registered: 2012-02-29
Posts: 5

Re: multiple maps in tab content

charlietfl wrote:

Browsers have difficult time getting dimensions of elements in a hidden container and maps need dimensions in order to render. One simple fix is not hide the containers, rather move them offscreen with css.

Alternately, trigger the map resize after a hidden element is displayed.
http://gmap3.net/forum/viewtopic.php?id=41

The trigger method makes sense for me yet what would be the best way to implement this on my code above?

PS Ran through the code in firebug and wihout changing anything the map loads in the container, yet when refreshed it goes back to the top right???? V.V confusing!!!

Last edited by stephen_ (2012-03-01 14:41:38)

Offline

#5 2012-03-01 18:08:44

johnnylo
Member
Registered: 2012-01-23
Posts: 7

Re: multiple maps in tab content

I had tried trigger resize either inside jquery tab or outside. 

If I added a click event outside jquery tab, the hidden map will only display correctly if I click on the tab two times (not double click).  It will never display correctly if I click the tab only once.

function () {... // map initialization.  map1 = $(mapID1).gmap3('get'), etc. mapID1 = "#switchmap".
    ...
    $("#switchmap").click(function () { resizeMap(map1) });
    $("#switchmap2").click(function () { resizeMap(map2) });
    ...

After reading Stephen's post, I changed it to call resize fucntion from jquery tab code on click event. Now it works without having to click the tab 2 separate times now.

    function resizeMap(m) {
    x = m.getZoom();
    c = m.getCenter();
    google.maps.event.trigger(m, 'resize');
    m.setZoom(x);
    m.setCenter(c);
    };
  
    
    //On Click Event
    $("ul.tabs li").click(function () {

        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content

        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab         + content
        $(activeTab).fadeIn(); //Fade in the active ID content
        // 
        resizeMap(map1);
        resizeMap(map2);
        //
        return false;
        });

    });

Code for outside jquery tab, same tab but without the if (activeTab === '#switchmap") ... statement, and the following in document ready.

    $("#switchmap").click(function () { resizeMap(map1) });
    $("#switchmap2").click(function () { resizeMap(map2) });

I'm sure you can use an if statement to resize just the activeTab.

Last edited by johnnylo (2012-03-01 19:15:08)

Offline

#6 2012-03-01 18:34:49

charlietfl
Moderator
Registered: 2011-11-24
Posts: 201

Re: multiple maps in tab content

there is a development version on github that supports resize

Offline

#7 2012-03-02 14:36:37

stephen_
Member
Registered: 2012-02-29
Posts: 5

Re: multiple maps in tab content

@charlietfl I think a demo version would be useful if only to allow another great 'selling' point on an excellent plugin...

Offline

#8 2012-03-02 15:29:58

charlietfl
Moderator
Registered: 2011-11-24
Posts: 201

Re: multiple maps in tab content

@stephen_   demo of what?

Offline

#9 2013-01-24 12:29:26

exactweb
Member
Registered: 2012-08-15
Posts: 3

Re: multiple maps in tab content

Not sure if it helps but this works for me:

map = $("#google_maps .map").gmap3('get');
google.maps.event.trigger(map, 'resize');
map.setZoom(map.getZoom());
map.panToBounds(map.getBounds());

Offline

#10 2017-10-08 07:11:11

ronnykinge
Member
Registered: 2017-04-06
Posts: 3,311

Re: multiple maps in tab content

SELECT statement in Example 154 is unusual because of the way Excel.  Character Comparison Essay Sample Mla Format Comparison Essay.  order resume online louis vuitton 
Chicago style essay chicago style essay Essay on compulsory. Cliffsnotes can ease your homework headaches and help you score high on exams. Play Review On West Side Story Essay Research Paper Drama Play Review on West Side Story The musical Play that I did my review on was West Side Story.  help with fsu essay  Why GAO Did This Study: The Airline Deregulation Act of 1978 phased out the. 
next Appointment From this Android App you can view. Wildlife and Recreationists Coexistence through Management and. Fischer, an astute judge of critical writing and a good friend along with editor of.  essays written in afrikaans  Understand competition Coffee shops are one of the few retail businesses. ResumeMaker Ultimate 6 Download Version by Office Depot. 
Essay in marathi language on environment. IT manager resumes should skip the frills and get down to business If you are applying for an IT management position, you may have a tough time. increasingly antisocial while writing your dissertation and, as I.  The one supreme being, the creator and ruler of the universe. The book contains a brief analysis of the history of changes in the administrative. Scoring Guides for MCAS English Language Arts Composition.  buy letter writing paper online

Offline

Board footer

Powered by FluxBB