Modal - map not assigned to div

Ionic Framework ionic-v3
1

Hi All,

I have an implementation using google maps js api. It works perfectly when I run it in a component. However, I want it to display in a modal. When I run it in a modal, it gets no errors reported and the map object seems to be created, the div can be found, but it just does not render the map. The modal is displayed, all the html renders, but the map is just not displayed.

My code is as follows:

filterMap.html

<ion-header>
  <ion-navbar>
    <ion-nav-items>
      <button (click)="addMarker()" danger>Add Marker&nbsp;<ion-icon class="ion-ios-pin"></ion-icon></button>
      <button (click)="undoLastMarker()" light>Undo&nbsp;<ion-icon class="ion-ios-undo"></ion-icon></button>
      <button (click)="deleteAllMarkers()" light>Clear&nbsp;<ion-icon class="ion-ios-trash"></ion-icon></button>
    </ion-nav-items>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <div id="filterMap"></div>

</ion-content>

filterMap.ts (modal)

import { Component } from '@angular/core';
import { NavController, NavParams, Loading } from 'ionic-angular/index';
import { Geolocation } from 'ionic-native';

@Component({
    templateUrl: 'build/pages/search/filterMap.html'
})
export class FilterMapModal {

    private map: any;
    private google: any;
    private markers = [];
    private loading: Loading = Loading.create();

    constructor(private params: NavParams, private nav: NavController) {
        this.map = null;
        this.loadMap();
    }

    loadMap() {
        let options = {
            timeout: 10000,
            enableHighAccuracy: true
        };

        Geolocation.getCurrentPosition(options).then((position) => {
            let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

            let mapOptions = {
                center: latLng,
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            this.map = new google.maps.Map(document.getElementById("filterMap"), mapOptions);
console.log(this.map);
console.log(document.getElementById("filterMap"));
        });
    }

}

console output from the above code:

 Object { gm_bindings_={...},  __gm={...},  gm_accessors_={...},  more...}
<div id="filterMap">

search.ts (calls the modal)

  presentModal() {
    let myModal = Modal.create(FilterMapModal, { param: "something" });
    this.nav.present(myModal);
  }
2 Likes
2

Same problem here… Gotta a blank modal…

1 Like
3

Same here. Any solution has been found?

4

any one got solution ? please help me ,
Struggling with same issue

5

I’m facing the same issue…

We need help :frowning:

6

This thread is ancient, and the code in the OP is totally irrelevant. Nobody can solve this problem based on it.

7

So here’s my code :

incident.ts (open the modal on button click)

openMap(){
    let modal = this.modalCtrl.create(IncidentMapPage, {"address": this.geoAddress});
    modal.present();
  }

incident-map.html

<ion-content>
	<ion-grid>
		<ion-row>
			<ion-col col-10>
				<ion-item>
	    			<ion-input [(ngModel)]="geoAddress" type="text" placeholder="{{'INCIDENT.MAP.address' | translate}}"></ion-input>
	  			</ion-item>
	  		</ion-col>
	  		<ion-col col-2>
	  			<button (tap)="getCoordinatesFromAddress()" ion-button><ion-icon name="ios-pin"></ion-icon></button>
	  		</ion-col>
	  	</ion-row>
 	</ion-grid>

	<div #map id="map" style="height:89%;">
		<button ion-button (tap)="goToCurrentPosition()" class="current-position-button">
			<ion-icon name="ios-navigate"></ion-icon>
		</button>
	</div>
</ion-content>

incident-map.ts

ionViewDidEnter() {
	GoogleMap.isAvailable().then(() => {
	    this.map = new GoogleMap(this.mapElement.nativeElement);
	    this.loadMap();
	});
}

loadMap(){
     	this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
	       	if(this.geoAddress != ""){
	       		this.getCoordinatesFromAddress(); //just display a marker, nothing to do with the issue
	       	}
	       	else{
	       		this.goToCurrentPosition();  //get position and display marker, nothing to do with the issue
	       	}
    	});
}

This is what I get on iPad :

image
IMG_0003.PNG1536×2048 119 KB

The modal background is not visible (red rectangle).
The map should be displayed in the blue rectangle.

Ionic info :

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.1.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.3
ios-deploy version: 1.9.0 
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v6.9.4
Xcode version: Xcode 8.3.2 Build version 8E2002

Edit : The map HTML code is successfully loaded, so I know the map is in the modal, but it’s not visible.

8

open your device and inspect modal then find class .ion-page.show-page change its opacity from 1 to 0

9

Thanks, but it’s not working. This is what I get :

image
IMG_0004.jpg1536×2048 58.2 KB

I fixed the issue on iPhone by adding :

let appRoot = <HTMLCollectionOf<any>>document.getElementsByClassName("app-root");
appRoot[0].style.opacity = 0;

Inside the ionViewDidEnter of the map’s page. But on iPad it’s not working :

image
IMG_0006.jpg1536×2048 139 KB

The modal background is not displayed and the page behind the the overlay is obviously not shown (because of root opacity 0)

I’m sure there is a better solution, but I don’t know it :frowning:

10

once you found any better solution please update @Alex_gsy

11

Well, like I said, I use this solution for smartphones :

let appRoot = <HTMLCollectionOf<any>>document.getElementsByClassName("app-root");
appRoot[0].style.opacity = 0;

For tablets, I decided, as I can’t find any good solution, to make the modal full screen, this solves the issue thanks to the app-root opacity set to 0. So this is my css code in the app.scss file :

@media (min-width: 567px) {
.modal-wrapper {
	    position: absolute;
	    top: 0;
	    left: 0;
	    display: block;
	    width: 100%;
	    height: 100%;
	}

	ion-backdrop{
		opacity: 0 !important;
	}
}

I don’t really like this workaround, so if someone find another solution, I’d like to know it.

13

My workaround is to set the underneath page transparent, on modal created/dismissed.

here it is