CODEWITHSUNDEEP
javascripthtmlgoogle-mapsgoogle-maps-api-3
Thomas Lai
Thomas Lai

Reputation: 317

google maps v3 appears distorted and doubled

This code works perfectly on jsfiddle and any other JavaScript sandbox app, but it doesn't work on my website.

HTML :

<div id="mapcontainer" style="position:absolute;width:280px;height:160px;"></div>

JS :

<script src="http://maps.googleapis.com/maps/api/js?key=*********************************&sensor=false"></script>
<script>
    var myCenter = new google.maps.LatLng(33.436150, -117.623090);

    function initialize() {
        var mapProp = {
            center: myCenter,
            zoom: 9,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById("mapcontainer"), mapProp);

        var marker = new google.maps.Marker({
            position: myCenter,
        });

        marker.setMap(map);

        google.maps.event.trigger(map, 'resize')
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

It looks like this:

enter image description here

Notice how the top 2/3 is distorted and the bottom 1/3 is fine. How can I fix this?

Upvotes: 2

Views: 610

Answers (3)

Ivan Garcia
Ivan Garcia

Reputation: 11

I stumbled over this page after I had the same problem myself on a google map I was developing. The solution I came up with was to add the following code after the google map javascript.

$(window).resize(function(){ initMap(); });

The "initMap();" part is so it just refreshes the map function. If you named the function something different that is what you need to use. Ultimately I realize this is a patch to the problem. But it works like a charm and is barely noticeable to the end user. All you are doing is refreshing the map function when you resize the window.

Upvotes: 1

Shane
Shane

Reputation: 1216

I figured out a similar issue due to the solution to this problem in comments.

It was a case of looking at one of the images in the map with a css debugger and seeing if it was affected by any other styles on the page

Upvotes: 0

Praveen
Praveen

Reputation: 56509

It seems there must be some other problem in code.

Your google maps code looks perfect, I have made a fiddle to show the difference.

From your script it seems you're using key for google maps. I think that is not necessary in v3. so try replacing it as shown below.

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

Upvotes: 1

Related Questions