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
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> </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>
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);
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?
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?
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.
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?
Reply With Quote
Bookmarks