Google Map API 3 - Map not showing full / resize

Question

I am trying get a custom google map API in a website, bu the problem is the map in not showing full, only a part of the map is show. enter image description here

Given below the code:

js code:

$(document).ready(function(){

var map=null; 
    function initialize() {
        var mapOptions = {
            center: new google.maps.LatLng(24.3573, 54.4636),
            zoom: 14,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        var currCenter = map.getCenter();
        google.maps.event.trigger(map, 'resize');
        map.setCenter(currCenter);
        map.setZoom(14);

        var markerOptions = {
            position: new google.maps.LatLng(24.3573, 54.4636),
            map: map
        };
        var marker = new google.maps.Marker(markerOptions);
        marker.setMap(map);

        var infoWindowOptions = {
            content: '<b>Compnay Name</b><br> Is Here!'
        };
        var infoWindow = new google.maps.InfoWindow(infoWindowOptions);
        infoWindow.open(map, marker);

    };
    google.maps.event.addDomListener(window, 'load', initialize);
});

html code:

<div class="container">
<h1>Location Map</h1>
<p></p>
 <div id="map-canvas"></div>
</div>

css code:

.container {width: 100%; height: 100%;}
.container #map-canvas {
width: 500px;
height: 250px;
margin: 0;
border: 1px solid rgb(225, 225, 225);}
.map h2{
font-size: 16px;
font-weight: bold;
padding: 20px 0 6px 0;}

Pls let me know what am i doing wrong?

I have heard that 'google.maps.event.trigger(map, 'resize');' usually does the trick, but in my code it does not seems to work, maybe I am not place in the right place.. pls help.

Thank you.

possible duplicate of [Map isn't showing on Google Maps JavaScript API v3 when nested in a div tag](http://stackoverflow.com/questions/16349476/map-isnt-showing-on-google-maps-javascript-api-v3-when-nested-in-a-div-tag) — geocodezip, Aug 21 '13 at 14:47
try to put your `google.maps.event.trigger(map, 'resize')` behind your last action, you are doing with the map. Maybe after `google.maps.event.addDomListener(window, 'load', initialize);` — Gary Klasen, Aug 21 '13 at 15:02
Your code as posted works for me, [live example](http://www.geocodezip.com/v3_SO_jquery_topLeftCorner.html) — geocodezip, Aug 21 '13 at 16:28
The map works fine as standalone div, the one I have is in a hidden div (page slides when clicked on location map link) — Bipin, Aug 22 '13 at 06:44
Sorry, the website don't have a online URL, its done through the localhost. — Bipin, Aug 22 '13 at 06:44

score 2 · Answer 1 · answered Feb 23 '14 at 09:29

I haved the same problem when used tab jQuery plugin. I call initialize() function when document ready ($(document).ready(function() { initialize(); })). I try to call initialize() function when map tab is actived and problem gone away. It's just my experience. Good luck!

Johnny

score 1 · Answer 2 · answered Dec 05 '14 at 08:20

1

@Bipin: I have solution for you to fix that error

Add function below in your Js Code

 function resizeMap(m) {
        x = m.getZoom();
        c = m.getCenter();
        google.maps.event.trigger(m, 'resize');
        m.setZoom(x);
        m.setCenter(c);
    };

//With m is the "map"

And then push the function after

google.maps.event.addDomListener(window, 'load', initialize);
resizeMap(map);

Hoping the solutiion can help.

answered Dec 05 '14 at 08:20

Binh LE

387
5
17

I was able to get this to work simply by calling "google.maps.event.trigger(m, 'resize');" without the other lines. – Mike Dec 17 '14 at 22:47

score 0 · Answer 3 · edited May 23 '17 at 12:19

0

I had the same issue, but in my case the map was supposed to pop-up. I overcame it by using the setTimeout javascript function to wait until the pop-up animation finished, and then I called the map initialization function. I hope this helps.

Also, your map looks distorted. Check this question for solutions: Google Maps api v3 tools: visual distortions?

edited May 23 '17 at 12:19

Community

1
1

answered Feb 10 '15 at 15:56

jim_kastrin

4,830
2
26
28

Google Map API 3 - Map not showing full / resize

3 Answers3