Forum Moderators: open
You'll notice I have a number of maps that I have embedded from Google Maps (I just used the embed code they provide). I want to hide the maps but show them when the visitor clicks the a map button.
Currently it does work but the map is skewed to the top-left corner. I have tried a number of different things but I can't seem to fix it. All I know is that it doesn't like being hidden. If I load the page with the map showing with the ability to hide the map by clicking the map button it shows up just fine.
Any thoughts?
<p>Simply the Best: 1008 Broad Street, Victoria, BC<br /><a href="javascript:InsertContent('c1');">[Map] </a></p>
<p id="c1" style="display:none"><iframe src="http://maps.google.ca/maps?f=q&source=s_q&hl=en&geocode=&q=1008+Broad+Street,+Victoria,+BC&sll=48.44273,-123.369404&sspn=0.011587,0.027874&ie=UTF8&hq=&hnear=1008+Broad+St,+Victoria,+Capital+Regional+District,+British+Columbia&z=14&iwloc=A&ll=48.431479,-123.362474&output=embed" width="714" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe><br /><small><a style="color:#0000FF;text-align:left" href="http://maps.google.ca/maps?f=q&source=embed&hl=en&geocode=&q=1008+Broad+Street,+Victoria,+BC&sll=48.44273,-123.369404&sspn=0.011587,0.027874&ie=UTF8&hq=&hnear=1008+Broad+St,+Victoria,+Capital+Regional+District,+British+Columbia&z=14&iwloc=A&ll=48.431479,-123.362474">View Larger Map</a></small></p>
<script type="text/javascript"><!--
function InsertContent(tid) {
if(document.getElementById(tid).style.display == "none") {
document.getElementById(tid).style.display = "";
}
else {
document.getElementById(tid).style.display = "none";
}
}
// --></script>Is there some way to load the map only once that map button is clicked, as oppose to having it preloaded waiting for the click? I imagine it would load fine if this was possible.
Thanks for any help.
[edited by: Fotiman at 7:50 pm (utc) on Nov. 17, 2009]
[edit reason] No URLs please. See TOS [webmasterworld.com] [/edit]
To better describe the problem since I can't show it:
The map loads fine under normal conditions, the address loads in the center of the map.
If I hide it within a js link to be displayed only once the link is clicked it will not show up properly. The map loads the address at the top-left corner putting it nearly off the map.
If anyone is brave enough they can pop that code above into an html page and you'll see what I mean.
I don't understand why it loads skewed just because it is hidden until clicked.
<html>
<head>
<title>Test</title>
</head>
<body>
<p>
Some text<br />
<a href="http://maps.google.ca/maps?f=q&source=s_q&hl=en&geocode=&q=1008+Broad+Street,+Victoria,+BC&sll=48.44273,-123.369404&sspn=0.011587,0.027874&ie=UTF8&hq=&hnear=1008+Broad+St,+Victoria,+Capital+Regional+District,+British+Columbia&z=14&iwloc=A&ll=48.431479,-123.362474&output=embed" onclick="InsertContent(this, 'c1');return false;">[Map]</a>
</p>
<p>
Next paragraph.
</p>
<script type="text/javascript">
/**
* @param el {HTMLLinkElement} The link element who's href points to the map
* @param id {String} The id of the container that will be generated. Make
* sure there are no elements with this id in your markup.
*/
function InsertContent(el, id) {
var p = el.parentNode,
n = document.getElementById(id),
f;
if (!n) {
// This id doesn't exist yet, so create it and append iframe
n = document.createElement('p');
n.id = id;
f = document.createElement('iframe');
f.src = el.href;
f.width = "714";
f.height = "350";
f.frameborder = "0";
f.scrolling = "no";
f.marginheight = "0";
f.marginwidth = "0";
n.appendChild(f);
p.insertBefore(n, el.nextSibling);
}
else {
// The id does exist, so now just show/hide it
n.style.display = (n.style.display == 'none' ? '' : 'none');
}
return;
}
</script>
</body>
</html>
