CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
LogicLooking
LogicLooking

Reputation: 928

Google maps api not working properly

So I'm playing around with this example and our company has its own API key for google maps. a co-worker and I tried to get the maps to work - Well in full screen the following code worked - by that I mean we just let the map scale the full width of the browser, the code we used is:

<script>
    var map;

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

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

<div id="map-canvas"></div>

Obviously their is no API key because that's loaded else where.

So I decided to add on to this, because I needed the map stored else where - and I added this extra jazz:

<style>
    #map-canvas {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }

    #Map{
        height: 350px;
    }
</style>

The first one is obvious, The second one is part of the jquery-ui tab which I basically, for this tab, set it's height to 350px

Moving on - the issue is this:

enter image description here

if I drop a person on to the road then I get:

enter image description here

the "up close and personal" stalker look goes full width and height but the far away directions map is all broken....

Anyone know why?

Upvotes: 1

Views: 3088

Answers (3)

jroi_web
jroi_web

Reputation: 1984

Use setTimeout when the DOM is ready. This is specifically for the maps that are initially hidden (Like when you are using the map inside a modal or popup window).

In jQuery:

$(document).ready(function(){

setTimeout('initialize()', 2000);

});

Upvotes: 0

Vinodkumargb
Vinodkumargb

Reputation: 51

Good point praveen! Even I had same problem! You don't have to call it only when the div or window is resized! In my case I am calling it after the Map is rendered.

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

Now I can see full rendered screen!!

Upvotes: 1

Praveen
Praveen

Reputation: 56529

I too had the same problem, where half of my map stayed grey colored(menas: unavailable state) whenever I resized the Google Maps container. I solved it by triggering the refresh event of Google maps like this

google.maps.event.trigger(map, "resize");

FYI: Whenever you change the Google Maps height or width, it is better to trigger this resize event.

resize : Developers should trigger this event on the map when the div changes size: google.maps.event.trigger(map, 'resize').

You can also check my question here.

Hope this solves your problem.

Upvotes: 1

Related Questions