Map in bootstrap modal

[carlos]

Hello, I'm trying to insert my map inside a modal but it doesn't appear.
I tried setting a var after x seconds when Modal is generated in view but it doesn't appear.

what i need to do?

thanks :)

[Matt-Jensen]

Do you think you could show me some code or an example of the issue?

[carlos]

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">&times;</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

[Matt-Jensen]

I'm not experiencing this issue

Have you set a hight for your map in your css file?

[John Fredy Baquero Celis]

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

{{#bs-button onClick=(action (mut modalPolyline) true)}}
  {{fa-icon 'map-o'}} Generar Polilínea
{{/bs-button}}

and its modal:

{{#bs-modal open=modalPolyline onSubmit=(action "setPoints") onHidden=(action (mut modalPolyline) false) as |modal|}}
  {{#modal.header}}
    <h4 class="modal-title">Polilínea</h4>
  {{/modal.header}}
  {{#modal.body}}
    {{g-maps name="my-map" lat=lat lng=lng zoom=zoom}}
  {{/modal.body}}
  {{#modal.footer}}
    {{#bs-button onClick=(action modal.close)}}Cancelar{{/bs-button}}
    {{#bs-button type="success" onClick=(action modal.submit)}}Generar{{/bs-button}}
  {{/modal.footer}}
{{/bs-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.

[Matt-Jensen]

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.

[John Fredy Baquero Celis]

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

{{#bs-form class="row" model=model onSubmit=(action "save") as |form|}}
  <div class="col-xs-5">
    {{form.element controlType="text" label="Nombre" placeholder="e.g. Pradera - UPB" property="name" required=true}}
    {{form.element controlType="number" label="Orientación" placeholder="Orientación" property="orientation" required=true}}
    {{form.element controlType="number" label="Trayecto" placeholder="Trayecto" property="way" required=true}}
  </div>

  <!-- This is the trigger modal button -->
  <div class="col-xs-7">
    {{#bs-button onClick=(action (mut modalPolyline) true)}}
      {{fa-icon 'map-o'}} Generar Polilínea
    {{/bs-button}}
  </div>
<!-- This is the trigger modal button -->

  <div class="col-xs-12">
    {{#bs-button type="primary" buttonType="submit"}}
      {{fa-icon ico}} {{title}}
    {{/bs-button}}
    {{#bs-button type="danger" onClick=(action "cancel")}}
      {{fa-icon "close"}} Cancelar
    {{/bs-button}}
  </div>
{{/bs-form}}

{{#bs-modal open=modalPolyline onSubmit=(action "setPoints") onHidden=(action (mut modalPolyline) false) as |modal|}}
  {{#modal.header}}
    <h4 class="modal-title">Polilínea</h4>
  {{/modal.header}}
  {{#modal.body}}
    {{g-maps
      name="my-map"
      lat=lat
      lng=lng
      zoom=zoom
      selections=selections
      selectionsModes=myModes
      selectionsPolyline="onPolylineSelect"
      polylines=polylines
      showMapTypeControl=false
      showZoomControl=false
      disableDoubleClickZoom=true}}
  {{/modal.body}}
  {{#modal.footer}}
    {{#bs-button onClick=(action modal.close)}}Cancelar{{/bs-button}}
    {{#bs-button type="success" onClick=(action modal.submit)}}Generar{{/bs-button}}
  {{/modal.footer}}
{{/bs-modal}}

[Matt-Jensen]

Hard to beat the simple approach:

{{#if active}}
  {{#bs-modal}}
  ...
  {{/bs-modal}}
{{/if}}

[John Fredy Baquero Celis]

It isn't works 😭

{{#bs-form class="row" model=model onSubmit=(action "save") as |form|}}
  <div class="col-xs-5">
    {{form.element controlType="text" label="Nombre" placeholder="e.g. Pradera - UPB" property="name" required=true}}
    {{form.element controlType="number" label="Orientación" placeholder="Orientación" property="orientation" required=true}}
    {{form.element controlType="number" label="Trayecto" placeholder="Trayecto" property="way" required=true}}
  </div>

  <!-- This is the trigger modal button -->
  <div class="col-xs-7">
    {{#bs-button onClick=(action (mut modalPolyline) true)}}
      {{fa-icon 'map-o'}} Generar Polilínea
    {{/bs-button}}
  </div>
<!-- This is the trigger modal button -->

  <div class="col-xs-12">
    {{#bs-button type="primary" buttonType="submit"}}
      {{fa-icon ico}} {{title}}
    {{/bs-button}}
    {{#bs-button type="danger" onClick=(action "cancel")}}
      {{fa-icon "close"}} Cancelar
    {{/bs-button}}
  </div>
{{/bs-form}}

{{#if modalPolyline}}
{{#bs-modal open=modalPolyline onSubmit=(action "setPoints") onHidden=(action (mut modalPolyline) false) as |modal|}}
  {{#modal.header}}
    <h4 class="modal-title">Polilínea</h4>
  {{/modal.header}}
  {{#modal.body}}
    {{g-maps
      name="my-map"
      lat=lat
      lng=lng
      zoom=zoom
      selections=selections
      selectionsModes=myModes
      selectionsPolyline="onPolylineSelect"
      polylines=polylines
      showMapTypeControl=false
      showZoomControl=false
      disableDoubleClickZoom=true}}
  {{/modal.body}}
  {{#modal.footer}}
    {{#bs-button onClick=(action modal.close)}}Cancelar{{/bs-button}}
    {{#bs-button type="success" onClick=(action modal.submit)}}Generar{{/bs-button}}
  {{/modal.footer}}
{{/bs-modal}}
{{/if}}

[Matt-Jensen]

@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.

[John Fredy Baquero Celis]

@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