Google Maps and JavaScript

Hello,

While building a simple website for the company (http://midas.bg/new) I've encountered the following issue.

Since the content is very small, there aren't any pages. Basic links Home/Services/Contacts activate hidden DIVs using the following code:

function showonlyone(thechosenone) {
var newboxes = document.getElementsByTagName("div");
for(var x=0; x<newboxes.length; x++) {
name = newboxes[x].getAttribute("class");
if (name == 'newboxes') {
if (newboxes[x].id == thechosenone) {
newboxes[x].style.display = 'block';
}
else {
newboxes[x].style.display = 'none';
}
}
}
}

Problem is that on the Contacts page (the last one) there's an IFRAME for Google Maps showing the location of the office. If the DIV is not hidden,
the map shows the mark. If the DIV is hidden and triggered by the script, it only shows the map without the mark.

Do you guys have any suggestions?


Secondly, I would like to ask if you know of any simple code for triggering smooth transition when clicking on Home/Services/Contacts,
like fading, instead of immediately showing DIV's content.

Thanks for looking into this!

I don't know much about google maps in iframes, but that behavior is very similar to what happens if a google API map is in a hidden div. You will notice that your marker is there, but off-map (at the top right). This is because the map does not know that its container has been resized.

The way you fix it with the API is by with a specific API function call that resizes the map, but obviously you can't do that here... what you could try is loading the iframe src after the div has been unhidden, or look for some other way to programatically reload/refresh the iframe.

as for transitions, there are lots of examples out there. vanilla js tends to do it with setInterval and a start and end value. Lots of people seem to like jQuery for "fancy" transitions, but there's nothing in jQuery that you can't do in normal javascript.