www.webdeveloper.com
Results 1 to 10 of 10

Thread: gmap v3 not centering in js hidden div

  1. #1
    Join Date
    Dec 2008
    Posts
    123

    gmap v3 not centering in js hidden div

    I have a gmap v3 in one of my js hidden div (4 tabs total) and I want it to show after the link to the hidden div is click. I am able to get the map showing but it seems to be seating in the top left corner and leave a big gray area in where it suppose to go. I read about using
    Code:
    google.maps.event.trigger(map, 'resize');
    but can't get it to work. I am new to javascript and need some help in getting the map to show correctly. thx.

    The js I used for the hidden div with tabs.
    Code:
    function hidestories() { var divs=document.getElementById('stories').getElementsByTagName('div'); 
    for (j=0; j<divs.length; j++) 
    { var rE = new RegExp("(^|\\s)" + 'story' + "(\\s|$)"); 
    if (rE.test(divs[j].className)) { divs[j].style.display="none"; } } }  
    function stories(first) 
    { var thebuttons=document.getElementById('thebuttons').getElementsByTagName('a'); 
    for (i=0; i<thebuttons.length; i++) 
    { thebuttons[i].onclick=function() { hidestories(); 
    var thestory=(this.href).split("#",2)[1]; document.getElementById
    (thestory).style.display="block"; return false; } } if (first) 
    { var firstone=document.getElementById('stories').firstChild; if (firstone.nodeType != 1) 
    {firstone = firstone.nextSibling;} firstone.style.display="block"; } } window.onload=function() 
    { hidestories(); stories(1); }
    gmap v3 code
    Code:
    function load() {     
    var myOptions = {center: new google.maps.LatLng(-34.397, 150.644), 
    zoom: 14,           
    mapTypeId: google.maps.MapTypeId.ROADMAP,          
    streetViewControl: false   };          
    var map = new google.maps.Map(document.getElementById("map"), myOptions);          
    var marker = new google.maps.Marker({position: new google.maps.LatLng(-34.397, 150.644), map: map});}
    here is part of the html that house the map. the story class is set as display:none
    HTML Code:
    <ul id="thebuttons">
    <li><a href="#tab1">Story A</a></li>
    <li><a href="#map">Story B</a></li>
    <li><a href="#tab3">Story C</a></li>
    </ul>
    <div id="stories">
    <div id="tab1" class="story"></div>
    <div id="map" class="story"><div id="map_canvas"></div></div>
    <div id="tab2" class="story"></div></div>

  2. #2
    Join Date
    Nov 2010
    Posts
    1,036
    can you show your full code, or maybe a link to your map? it's impossible to see what the problem is from snippets.

    properly indenting your code will probably help you (or others) see what is going on, but that is a somewhat unrelated issue

  3. #3
    Join Date
    Dec 2008
    Posts
    123
    I have try to recreate the script with problem below. You can see from the last tab the map is only showing half and the other half is gray. Any help will be great. Thx.

    HTML Code:
    <!DOCTYPE html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
    <title></title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    function hidestories() {
    var divs=document.getElementById('stories').getElementsByTagName('div');
    for (j=0; j<divs.length; j++) {
    var rE = new RegExp("(^|\\s)" + 'story' + "(\\s|$)");
    if (rE.test(divs[j].className)) {
    divs[j].style.display="none";}}}
    
    function stories(first) {
    var thebuttons=document.getElementById('thebuttons').getElementsByTagName('a');
    for (i=0; i<thebuttons.length; i++) {
    thebuttons[i].onclick=function() {
    hidestories();
    var thestory=(this.href).split("#",2)[1];
    document.getElementById(thestory).style.display="block";
    return false;}}
    if (first) {
    var firstone=document.getElementById('stories').firstChild;
    if (firstone.nodeType != 1) {firstone = firstone.nextSibling;}
    firstone.style.display="block";}}
    
    function load() {
        var myOptions = {center: new google.maps.LatLng(-34.397, 150.644), zoom: 14,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
         	 streetViewControl: false	};
        	 var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
     		 var marker = new google.maps.Marker({position: new google.maps.LatLng(-34.397, 150.644), map: map});}
    window.onload=function() {
    hidestories();
    stories(1);
    load();
    }
    
     </script>
    <style type="text/css">
    #map_canvas { width:30empx; height:250px;  }
    #thebuttons {
    list-style:none;
    width:24em;
    margin:auto;
    }
    #thebuttons li {
    float:left;
    width:8em;
    font-weight:bold;
    background-color:yellow;
    padding:0.5em 0;
    margin:1em auto;
    text-align:center;
    }
    #stories {
    width:30em;
    margin:1em auto;
    border:1px solid purple;
    clear:left;
    padding:1em;
    }
    .story {display:none;}
    </style>
    </head>
    <body>
    <div id="wrap">
    <div id="body" class="cfix"><h1>&nbsp;</h1>
    <ul id="thebuttons">
      <li><a href="#storyA">Story A</a></li>
    <li><a href="#storyB">Story B</a></li>
    <li><a href="#storyC">Story C</a></li>
    </ul>
    <div id="stories">
    	<div id="storyA" class="story">
    	<h2>Explanation : Part 1</h2>
    	<p>When the page loads, the hidestories() function is called (with the 'window.onload' bit). This finds the #stories div then hides all the divs inside that with the class 'story' and makes them 'display:none;'.
    Then, to show the first story onload, a variable is sent to the stories() function.</p>
    	</div>
    	<div id="storyB" class="story">
    	<h2>Explanation : Part 2</h2>
    	<p>The good thing about this is that if javascript is disabled, the links will work as normal and all the content will still be readable.</p>
    	</div>
    	<div id="storyC" class="story">
    	<table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr><td><div id="map_canvas"></div></td></tr>
    </table>
    </div></div>
    </div></div>
    </body>
    </html>

  4. #4
    Join Date
    Nov 2010
    Posts
    1,036
    you need to do a couple of things.
    - make your map object available in the global scope. you can do this by putting this line at the start of your script:
    Code:
    var map=null;
    and taking the "var" out of this line:
    Code:
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    - next, add this bit:
    Code:
    if(thestory=="storyC"){
    google.maps.event.trigger(map, 'resize');
    }
    to your stories function, between the
    Code:
    document.getElementById(thestory).style.display="block";
    and the
    Code:
    return false;}}
    Last edited by xelawho; 04-12-2012 at 07:34 AM.

  5. #5
    Join Date
    Dec 2008
    Posts
    123
    xelawho, thx for your help. I can now see the whole map but it still looks like off center. The marker is on the top left corner instead of center of the map. Is there any way that can make it center?

    thanks.

  6. #6
    Join Date
    Nov 2010
    Posts
    1,036
    I'm guesing the cheap and nasty way of doing it would be to call:
    Code:
    map.setCenter(new google.maps.LatLng(-34.397, 150.644))
    straight after the resize?

  7. #7
    Join Date
    Dec 2008
    Posts
    123
    This solution won't work for me as I have the js for the tabs in a separate file and link it to all the files that needs that function while the map script in the individual files themselves. Any other suggestions?

  8. #8
    Join Date
    Nov 2010
    Posts
    1,036
    1. can you rephrase that, because I have no idea what the problem is. Does it mean you have various maps that are sharing the same function?
    2. if you can call map "resize" you can call map setCenter in the same function.

  9. #9
    Join Date
    Dec 2008
    Posts
    123
    i have multiple php files that use the same hidden div function with its own map (different lat/lng) I save the hidden div in a js file and link it to all the pages that have its own map. The resize function works find in the js file because it doesn't call out the lat/lng. Is there anyway to use the setCenter in the js and have it 'link' to the lat/lng in the php or a way to use the resize function in the php file?

  10. #10
    Join Date
    Dec 2008
    Posts
    123
    Thanks xelawho,

    I found the solution for it

    Code:
    if(thestory=="storyC"){
    var currCenter = map.getCenter();
    google.maps.event.trigger(map, 'resize');
    map.setCenter(currCenter);
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles