Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Thanked 0 Times in 0 Posts

    Google Maps and JavaScript


    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!

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Thanked 568 Times in 565 Posts
    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.


    Posting Permissions

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