CODEWITHSUNDEEP
google-maps
Nix
Nix

Reputation: 5998

Google map position incorrect on load

I'm having a problem with an iframed Google map. Basically, the position is incorrect, but not always. I think the problem may have something to do with the fact that the map is in a hidden div, which is displayed later.

Can anyone verify that this is indeed a problem, or propose a solution to this? I do not have much control over the map, as it is iframed from somewhere else.

I've tried to give the iframe an ID, which I then target with google.maps.event.trigger(map, "resize"); on the function that reveals the parent container, but to no avail.

EDIT
As requested, here's the map:

<iframe width="450" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/?ie=UTF8&amp;t=m&amp;ll=56.084298,11.074219&amp;z=6&amp;output=embed"></iframe>

As you can see, there's nothin special about it. It's supposed to show Denmark, but it some times show Germany and Poland instead. I'm sure those are nice places, but the client see little use of it.

Upvotes: 10

Views: 11678

Answers (7)

Nick Adams
Nick Adams

Reputation: 106

I also can confirm this problem. I don't think it is related to your hidden div, as I have the issue with fixed elements too.

The problem is that the place you want the map to center on ends up in the top left corner of the iframe for some reason. I think it's because on google's side the map resize event is firing too early before it knows the full size of the iFrame.

Try this, so far it works for me:

  1. Remove the iframe src tag.

  2. Embed the below javascript code somewhere below the iframe:

    <script type='text/javascript'>
    jQuery("iframe#headerMap").attr("src", "http://maps.google.com/maps/ms?etc etc....");
</script>

Because it loads the map after the iframe is there. If I still have problems in the future I'll try adding a short delay to the above code, making it run after document load.

Upvotes: 9

Tam&#225;s G&#225;ll
Tam&#225;s G&#225;ll

Reputation: 1

This one did not work for me:

jQuery("iframe#headerMap").attr("src", "http://maps.google.com/maps/ms?etc etc....");

… so I had to find another way to solve this problem.

My problem was that I had a <div> that was display: none, and became visible this way after 2,5 seconds like this:

setTimeout(function() {
    $("#contents")
    .css({opacity: 0}).fadeIn()
    .animate({opacity:1}, 1000, function() {
    });
}, 2500);

And I wanted the Google map to be shown in #contents, and I had the same problem that the red marker was on the top left corner.

So I added a <div id="map"></div> into the page.

Then I added the iframe stuff in a php file called map.php, and I added this jquery line below:

setTimeout(function() {
    $("#map").load('map.php');
}, 2500);

So it loaded the map.php with the iframe into the div with map id. It worked perfectly.

Upvotes: 0

M-sAnNan
M-sAnNan

Reputation: 804

I suggest load map with some time delay after checking the div is visible or not which is going to hold the map . Give it a try !

  $(document).ready(function () {
        $('.togglebtn').click(function () {

 if(!$('#map_canvas').is(':visible')){
                setTimeout(function(){initialize()}, 500);
                }
    });
});


   //your function
 function initialize() {


        var mapOptions = {
            zoom: 3,
          center :  new google.map.LatLng(31.510474,80.352287),
            center: new google.maps.LatLng(44.510474, 50.352287),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

        var contentSC_PAK = "SoftCircles Pakistan";
        .....
        ..... 

        and rest of your map code to initialize map



        });

    }

Upvotes: 0

M-sAnNan
M-sAnNan

Reputation: 804

I suggest load map with some time delay after checking the div is visible or not which is going to hold the map . Worked for me

  $(document).ready(function () {
        $('.togglebtn').click(function () {

 if(!$('#map_canvas').is(':visible')){
                setTimeout(function(){initialize()}, 500);
                }
    });
});


   //your function
 function initialize() {


        var mapOptions = {
            zoom: 3,
          center :  new google.map.LatLng(31.510474,80.352287),
            center: new google.maps.LatLng(44.510474, 50.352287),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

        var contentSC_PAK = "SoftCircles Pakistan";
        .....
        ..... 

        and rest of your map code to initialize map



        });

    }

Upvotes: 0

Liviu
Liviu

Reputation: 41

The simple solution:

  1. Put the iframe inside a div with the id="map".
  2. Don't hide the div, because the map will be generated wrong.

  3. Position the div absolute, 10.000 pixels on left. In this case the map will not be on the screen, but will be loaded.

    jQuery('#map').css({"position":"absolute", "left":"-10000px"});

  4. When you click the button to display the map add:

    jQuery('#map').show(); jQuery('#map').css({"position":"static"});

  5. To hide the div add:

    jQuery('#map').hide();

Upvotes: 4

JcG
JcG

Reputation: 1108

Can confirm I've experienced this problem when displaying two maps in 'tabbed' divs. I.e. one div loads hidden.

The simplest way I've found to over come the problem is simply to use a bit of trial and error and offset the map before copy and pasting the embed code, to compensate for the erroneous map offset. But just remember to leave the external link (the link underneath to the external google map) as the original href otherwise this map will be offset too.

Upvotes: 0

Allan Wintersieck
Allan Wintersieck

Reputation: 873

The "resize" event takes the map object as an argument, not an id. Since you are using maps.google.com in an iframe, I don't believe it's possible to access the actual map object.

Unfortunately, I think the best answer is to switch to using a simple implementation of the Google Maps v3 API instead of embedding maps.google.com in an iframe. This will allow you to trigger "resize" properly when needed, since you'll have access to the map object.

Here's the documentation: http://code.google.com/apis/maps/documentation/javascript/tutorial.html

Set up a simple implementation like this example: http://code.google.com/apis/maps/documentation/javascript/examples/map-simple.html

Then leave your call to google.maps.event.trigger(map, "resize"); when you show the hidden container.

Upvotes: 0

Related Questions