Comments (10)
Hard to beat the simple approach:
{{#if active}}
{{#bs-modal}}
...
{{/bs-modal}}
{{/if}}
from ember-cli-g-maps.
Do you think you could show me some code or an example of the issue?
from ember-cli-g-maps.
yes, when i open the route, the modal display.
<div class="modal fade" id="modelo-show" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" {{action 'back'}}>
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">{{fa-icon 'street-view'}} Information</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-xs-12">
Place
</div>
</div>
<div class="row">
<div class="col-xs-12">
<p>Some text in the modal.</p>
{{g-maps name="mi-mapa" lat=model.latitud lng=model.longitud zoom=17 draggable=false markers=model.marks }}
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal" {{action 'back'}}>
{{fa-icon 'times'}} Close
</button>
</div>
</div>
</div>
</div>
or in other case, i put a modal bootstrap structure in a single route which activate when click on button and inside the modal i put map and it doesn't appear
from ember-cli-g-maps.
I'm not experiencing this issue
Have you set a hight for your map in your css file?
from ember-cli-g-maps.
Hi @Matt-Jensen, I would like re-open this issue. I've a similar problem with ember-cli-g-maps
and the bootstrap-modals
.
I have a trigger modal button
and its modal:
But, When I click the button, the map doesn't appear. I used the devTool to find the problem and I saw:
The properties width and height are equals to zero. My styles are like:
.ember-cli-g-map {
width: auto;
height: 300px;
}
Something is changing these properties and appending width: 0; height: 0;
. I'm using ember-bootstrap
. Thanks 馃憤 馃槃
Note: The map works! But inside the modal doesn't work.
from ember-cli-g-maps.
When is the map actually rendered? When the modal is activated or when the general template renders?
I ask because if the map is rendered when it is not visible, I think google maps will set the height to 0px. If that is the case you will likely just need to ensure the modals' contents does not get rendered until the modal is activated.
from ember-cli-g-maps.
The map rendered when the template renders. I'm trying to render the map when the modal is active. But I don't know how to do it.
This is the template:
templates/components/trips/trip-form.hbs
from ember-cli-g-maps.
It isn't works 馃槶
from ember-cli-g-maps.
@jfbaquerocelis I've gotten this to work as per my comment on: May 11, 2016.
I'm sorry you're having trouble, however looking at code samples in comments isn't really helping my understanding. Please try simplying your code or giving me access to code I can help debug.
from ember-cli-g-maps.
@Matt-Jensen It's works! The bootstrap modal has an onShown
event, I created a bool variable and I active the map when it's true
from ember-cli-g-maps.
Related Issues (20)
- Can we remove Bower Dependency HOT 1
- Cannot read property 'Autocomplete' HOT 1
- please adapt your code to last EmberJS releases HOT 7
- Advice on Travel Route HOT 2
- disable street view control HOT 1
- How to get and update active markers? HOT 3
- Set map's properties without littering controller HOT 2
- Unexpected token when i am running ember server HOT 2
- Unable to get geocoding for gMaps to work HOT 6
- How can i show my location like google.com/maps 's blue dot HOT 1
- how to compare current latitude/longitude to previous latitude/longitude HOT 1
- Markers not showing up on deployed production mode HOT 4
- https://mapstyle.withgoogle.com/ style add feature? HOT 1
- Unable to independently style markers HOT 3
- BUG: Ember app not loading in IE11 HOT 4
- FR: GroundOverlays HOT 1
- BUG: Zoom resets after drag HOT 1
- BUG: Browser crashes upon loading ember-cli-g-maps with new default JS API (v3.31) HOT 3
- FR: support for marker clustering? HOT 1
- Zoom resets to initial value HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
馃枛 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 馃搳馃搱馃帀
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google 鉂わ笍 Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ember-cli-g-maps.