1

I just added a googlemap to a website. I is placed as presented in the toturials in a map_canvas div, and this div is nested inside another div like:

now the problem is that the map tiles stayes in the topleft corner but not the map background like this http://screencast.com/t/jeUSKijjwE

what could be wrong?

Rasmus Christensen
  • 8,321
  • 12
  • 51
  • 78
  • ----UPDATE----- Well just saw that when the browser is restored and then maximized again, then the map draws correct.....But why? – Rasmus Christensen Oct 21 '11 at 19:53
  • http://stackoverflow.com/questions/8803323/google-maps-api-map-sometimes-appears-only-on-upper-left-corner-of-its-div/11006250#11006250 – maksbd19 Jun 12 '12 at 23:38

4 Answers4

1

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



        });

    }
M-sAnNan
  • 704
  • 8
  • 15
1

This is usually a problem with showing, hiding, or resizing a map.

In google maps v3, I believe you can call google.maps.event.trigger(map, 'resize'); where map is the reference to your google maps object.

broox
  • 3,538
  • 33
  • 25
0

You have to use autosizse option. I had same issue, and i solved it.

Here the code when you open a modal and inside it, call a locationpicker.

    $scope.map_picker = function(){
        $("#map_modal").modal('show');
        $('.us2').locationpicker({
            location: {latitude: 33.997215339647724, longitude: -81.02654766235355},
            radius: 300,
            inputBinding: {
                latitudeInput: $('.us2-lat'),
                longitudeInput: $('.us2-lon'),
                radiusInput: $('#us2-radius'),
                locationNameInput: $('#us2-address')
            }
        });

     **$('#map_modal').on('shown.bs.modal', function () {
            $('.us2').locationpicker('autosize');
        });**
}

The main logic is just have to use this line: $('.us2').locationpicker('autosize'); But it is important how and where you are calling this line.

jatinkumar patel
  • 2,920
  • 21
  • 28
0

I had this problem and discovered that in my case the issue was that I was creating the map_canvas div with javascript innerHTML.

The map would display correctly the first time, but the second time I'd call it (different map though) it would display the same map (wrong map), and the third time I'd call another map it would display it only in the top left corner. It would be in the top corner for all the rest of the calls.

All I had to do was put the div in the original HTML, and it works perfectly from there on out.

Hope this helps someone!

user1030607
  • 1