[r1-dev] How to trigger resize events on the underlying map instance? #114
Comments
|
I believe sizing is definitely an issue / bug. My main guess right now is that the height is basically hard coded due to some twitter bootstrap issues. @nlaplante can you confirm this? |
ghost
assigned 
|
@nmccready: I don't think there is any size hard coded, you can set whatever width/height you want and it works fine. The issue happens when you resize the map container div after the map is loaded, which would require us to notify the map it has changed but. |
|
When I say "hard coded" I mean that the map height will only change via pixel settings. IE height=700px. I would be better if percentage worked since it is way more flexible. |
|
The relative height works only if you set it to all DOM tree until the map itself, I think this is not related to the angular directive. This is the structure you might have with bootstrap, you need to set height on all the elements since html, body and so on. <html>
<body>
<div class="container">
<div class="row">
<div class="span*">
<div class="google.map"> <!-- your map div -->
<div class="angular-google-map"> <!-- this is generated by the maps directive -->
<div class="angular-google-map-container"> <!-- this is generated by the maps directive -->If you miss setting height on one of these the map will have height undefined and won't display. |
|
Adding the following CSS will do the trick: .angular-google-map { |
|
@fbuskens Can you explain why this works? |
|
hi 23tux You can find an explanation here: https://niklausgerber.com/blog/responsive-google-or-bing-maps/ |
|
Nice |
|
Using that strategy I can successfully resize the angular gmap container and the iframe responds accordingly. however, there is a visual defect in the actual map, it fails to load tiles beyond a certain bounds from the initialization size. My use case is I have a map widget inside a gridster draggable/resizable element. So, I have an interesting solution. Initialize the map's container size |
Let's say I have a map is inside a div that takes 70% of the width and I want to dynamically change it to 100%. In this case I would need to notify the map it was resized:
google.maps.event.trigger(map, 'resize');Any ideas on how to accomplish that?
api reference:
The text was updated successfully, but these errors were encountered: