0

I've seen solutions to show map in hidden div but I dont know how to fix, it's not clear where to insert the code (I'm a desiger, not programmer). This is the issue: Click here to see the post. It says to put google.maps.event.trigger(map, 'resize') somewhere in the code to get the map working in hidden areas.

So where do I put this in my code? Does anybody can help me please? I tried to put when select Layer 2 but dont even show the input field.

My code: http://jsfiddle.net/4y42005t/

(is not working in jsfiddle because of jquery.geocomplete.js)

Community
  • 1
  • 1
Kelson Batista
  • 406
  • 4
  • 25
  • 1
    The problem is you have not initialize your map. Seems like you are using [jQuery Geocoding and Places Autocomplete Plugin](http://ubilabs.github.io/geocomplete/), so the best thing to do would be to read their site and tutorials. – kaho Mar 24 '15 at 01:46
  • Hi @kaho, sorry I forgot to put that part of the code :) but yes I had initialized and nothing happen. I read that docs but didnt find anything useful, could you please give me a light? tks – Kelson Batista Mar 24 '15 at 09:17
  • would it be because you didn't set the style on your `map_canvas` to something like this: `style="position: relative; overflow: hidden; transform: translateZ(0px); background-color: rgb(229, 227, 223);"`? – kaho Mar 24 '15 at 15:45
  • @kaho , is not this... Is about "google.maps.event.trigger(map, 'resize')" , but I do know where to put into my code – Kelson Batista Mar 24 '15 at 21:57
  • I finally figured it out :) sorry for the misunderstanding at the beginning – kaho Mar 25 '15 at 21:48

1 Answers1

0

You actually have to do it after you do $('#layer2').show(); so that map_canvas would update its value from x: 0,y: 0,w: 0,h: 0 to x: 71,y: 8,w: 600,h: 400.

Then you can trigger the resize method google.maps.event.trigger(map, 'resize');

I made a jsfiddle live demo.

Christina
  • 100
  • 9
kaho
  • 4,746
  • 1
  • 16
  • 24