CODEWITHSUNDEEP
javascriptjquerygoogle-mapsiframegoogle-maps-api-3
Dreadlord
Dreadlord

Reputation: 413

Google map Iframe in a hidden <div> problems with zoom and centering

I'm using exactly this Google Map iframe toggle code: http://jsfiddle.net/cancerian73/T7jLf/20/ But this example works because the map iframe has a lot of parametrs. And I'm using custom Google My Maps which cant have the same parameters... When my iframe opens, my markers are in upper left corner and map is unzoomed to the point where I see whole continent. How can I make this work?

BTW since im using Google Map Iframe for me API solutions like this one don't apply:

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

I have one more idea, but don't know if it will work and I don't know how to do it. Would it be possible to put some kind of a lazy load on display:none CSS so the map loads in full size and after 1 or 2 seconds it hides? Please help if you can

Upvotes: 1

Views: 1243

Answers (1)

ScaisEdge
ScaisEdge

Reputation: 133360

The simplest way for show this kind of maps is call the javascrip function for generate the map when you click the element for showing the frame.

I often have to use maps hidden and I found that the easiest way to view them without any problems is to invoke a function of the map display connected to a presentation event such as a button or a tab

in HTML 

<div class = "myclass" onclick = "show_my_map()">

in javascript

<script>

show_my_map function() {

   mapOptions var = {
     Level: 17,
     center: new google.maps.LatLng (41.650299490787712, 12.536399034779)
     mapTypeId: google.maps.MapTypeId.SATELLITE
   };



   map = new google.maps.Map (document.getElementById ('map-canvas'),
      mapOptions);

}
</script>

Upvotes: 2

Related Questions