Is it possible to add javascript google map in non-home page?

Ionic Framework ionic-v3
1

I am trying to create a basic ionic2 app with google maps as per this tutorial

In the tutorial, google map is integrated in home page and the style elements for the same is kept in home.scss

In my app I would like to integrate maps in a different page named temple. So i kept style elements in scss of temples page temples.scss. But, i don’t see the map by doing this and the map shows up fine if i keep the style elements in home.scss. I am confused with this behaviour.

Now my question is, to add maps, is it mandatory to keep style elements only in home.scss irrespective of the page i add maps to? If not, please point where i am going wrong.

Below is my app code…

Code from temple.html:

<ion-header>
    <ion-navbar>
        <button menuToggle>
            <ion-icon name="menu"></ion-icon>
        </button>
        <ion-title>தாங்கல்</ion-title>
    </ion-navbar>
</ion-header>

<ion-content  class="temple">
  <div #map id="map"></div>
</ion-content>

Code from temple.ts:

import {Component, ViewChild, ElementRef} from '@angular/core';
import {NavController} from 'ionic-angular';

declare var google;
@Component({
selector: 'temple-page',
  templateUrl: 'build/pages/temples/temples.html'
})
export class TemplesPage {
@ViewChild('map') mapElement: ElementRef;
map: any;
  constructor(private navCtrl: NavController) {}

  ionViewLoaded(){this.loadMap();}

  loadMap(){
    let latLng = new google.maps.LatLng(8.117042, 77.491573);
    let mapOptions = {
      center: latLng,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
  }
}

Code from home.scss:

//This component is linked with map in temples page
//Map component content starts here
.ios, .md
{
temple-page{
          .scroll-content {height: 100%}
          #map {width: 100%;height: 100%;}
         }
}
//Map component content ends here
2

It is fine to keep your style in component’s scss file. In fact, it is better to do so as the codes are cleaner compared to dumping everthing in one scss file. The scss file should load up fine if you follow ionic 2 default structure.

I cant tell what’s wrong with your code. You might want to put up a plunker to demonstrate your problem. You can also check whether the style is loaded through inspector.

3

In temple.ts script i have used selector. Is it possible to have map without using selector for styling?

4

Yes. You can style on #map too. It works like normal css.