0

I am using gmap, drupal 6 on pantheon. My gmap occurs quaterly in its own div, when the page refreshes.

I have checked with gmap resize() option. it did not work. Even I have tried to load the gmap, when the tab(the map is inside "view map" tab not jquery UI tab) is clicked, it did not work there too. The map is not inside iframe. When the browser is re-sized or inspect element tool is opened for debugging, the map appears but the matker is not visible. The marker goes outside of the given width-height.

Google Maps not rendering completely on page? did not help me.

Please suggest.

Community
  • 1
  • 1
sahadbs
  • 21
  • 3

1 Answers1

0

  1. Are you rendering the "#map-canvas" HTML div programmatically?
    In that case, make sure that the DOM is ready before trying to render the Map.

  2. Apply: google.maps.event.trigger(map, 'resize'); I had to use this to prevent gray areas => But I guess this is what you've tried already?

  3. Check the map dimensions in the Google Chrome Element inspector.

html_programmer
  • 18,126
  • 18
  • 85
  • 158
  • 1. I am showing the map on window load. google.maps.event.addDomListener(window, 'load', initialize); 2. Did not work for me. 3. CSS=> #map-canvas {height:400px; width:100%;} HTML=>
    – sahadbs Dec 17 '13 at 11:06
  • In the element inspector, hover over the map-canvas div: you can check if there is perhaps some overlapping div anywhere. The window on load method should work; you can also try to use jQuery's DOM ready for it. And the resize function should definitely work - I've used the hack many times before. But post your post in the question, you never know you might have missed out on something. – html_programmer Dec 17 '13 at 11:20
  • There is no some overlapping div. I have used jQuery's DOM ready or resize() when the particular tab(the map is inside "view map" tab not jquery UI tab) is clicked $('#check').on('click', function(){ setTimeout(function(){ google.maps.event.trigger(canvas-map, "resize"); }, 2000); }); – sahadbs Dec 17 '13 at 18:43
  • You can try to instantiate the map the moment the new view gets instantiated as a callback instead of on button click. – html_programmer Dec 17 '13 at 19:42
  • I can't get u. please explain or give an example. Thanks in advance. – sahadbs Dec 18 '13 at 16:25
  • What I mean is that you can try to trigger the map instantiation, ie. `var map = new google.maps.Map` after the view has been rendered. For jQuery UI tabs, the callback is triggered like this: `$( ".selector" ).tabs({ load: function(event, ui) { ... } });` – html_programmer Dec 19 '13 at 13:36
  • 1
    I did not use jquery UI. My **problem is solved** by calling the initialize() on tab click. Thank you very much for your time and valueable answers. Enjoy Holiday! Happy New Year.. :) – sahadbs Dec 27 '13 at 19:16