Ionic Native: Styling Google Maps

In our Previous post we have learned how to add Google Maps to our App, In this post lets try to add some custom styles to change look and feel of the Map to suite App Design.

Styling the Map

To style the map we can either style it ourselves by writing the json or we can use the google styling wizard to style the map, which returns json. In this tutorial i will be using the google styling wizard. You can edit and create new styles with the styling wizard tool Google provides, follow the link to the site https://mapstyle.withgoogle.com/.


When you’re done tweaking the map you can click on FINISH. It should bring up a modal in which you can copy the json.

Adding The Custom Style To The Map

The json string is too long, so i prefer exporting it in a seperate file and importing it in the main file. We will create a file called mapStyle in the home page folder and save the json there. As shown below:

Introduction

Styling your native google map can be useful, if you have a brand and you want your map to match the brand. It can also provide better ux depending on the use case of the app, also useful for theming your app. In this tutorial we will be building a map that changes style depending on the time of the day. It will have a normal map style during the day and a dark style during the night.

Setting up project

To generate a new ionic project, run the following command in the ionic cli:

 

 

 

iTechnoFreaks

 
  ionic start googleStyleMap blank

navigate into the project:

 

 

 

iTechnoFreaks

 
  cd googleStyleMap

If you check the folder you should see a src folder. Navigate into it, you should see pages, we will be using the home page inside the pages folder to display our map. Now let’s install the plugin Get the api key and add it to the following code

 

 

 

iTechnoFreaks

 
  ionic cordova plugin add https://github.com/mapsplugin/cordova-plugin-googlemaps#multiple_maps --variable API_KEY_FOR_ANDROID="YOUR_ANDROID_API_KEY_IS_HERE" --variable API_KEY_FOR_IOS="YOUR_IOS_API_KEY_IS_HERE"

Now we install the native wrapper

 

 

 

iTechnoFreaks

 export const mapStyle = [
  {
        "elementType": "geometry",
        "stylers": [
          {
            "color": "#242f3e"
          }
        ]
      },
      {
        "elementType": "labels.text.fill",
        "stylers": [
          {
            "color": "#746855"
          }
        ]
      },...
  ]

We can then import it in our home.ts file

Introduction

Styling your native google map can be useful, if you have a brand and you want your map to match the brand. It can also provide better ux depending on the use case of the app, also useful for theming your app. In this tutorial we will be building a map that changes style depending on the time of the day. It will have a normal map style during the day and a dark style during the night.

Setting up project

To generate a new ionic project, run the following command in the ionic cli:

 

 

 

iTechnoFreaks

 
  ionic start googleStyleMap blank

navigate into the project:

 

 

 

iTechnoFreaks

 
  cd googleStyleMap

If you check the folder you should see a src folder. Navigate into it, you should see pages, we will be using the home page inside the pages folder to display our map. Now let’s install the plugin Get the api key and add it to the following code

 

 

 

iTechnoFreaks

 
  ionic cordova plugin add https://github.com/mapsplugin/cordova-plugin-googlemaps#multiple_maps --variable API_KEY_FOR_ANDROID="YOUR_ANDROID_API_KEY_IS_HERE" --variable API_KEY_FOR_IOS="YOUR_IOS_API_KEY_IS_HERE"

Now we install the native wrapper

 

 

 

iTechnoFreaks

import { mapStyle } from './mapStyle';

We will get the current time of the day, then apply the appropriate style to the map. we will create a function that tells us if it’s night.

Introduction

Styling your native google map can be useful, if you have a brand and you want your map to match the brand. It can also provide better ux depending on the use case of the app, also useful for theming your app. In this tutorial we will be building a map that changes style depending on the time of the day. It will have a normal map style during the day and a dark style during the night.

Setting up project

To generate a new ionic project, run the following command in the ionic cli:

 

 

 

iTechnoFreaks

 
  ionic start googleStyleMap blank

navigate into the project:

 

 

 

iTechnoFreaks

 
  cd googleStyleMap

If you check the folder you should see a src folder. Navigate into it, you should see pages, we will be using the home page inside the pages folder to display our map. Now let’s install the plugin Get the api key and add it to the following code

 

 

 

iTechnoFreaks

 
  ionic cordova plugin add https://github.com/mapsplugin/cordova-plugin-googlemaps#multiple_maps --variable API_KEY_FOR_ANDROID="YOUR_ANDROID_API_KEY_IS_HERE" --variable API_KEY_FOR_IOS="YOUR_IOS_API_KEY_IS_HERE"

Now we install the native wrapper

 

 

 

iTechnoFreaks

isNight(){
    //Returns true if the time is between
    //7pm to 5am
    let time = new Date().getHours();
    return (time > 5 && time < 19) ? false : true;
  }

We can the use the function to apply the style to the map. With the following code:

Introduction

Styling your native google map can be useful, if you have a brand and you want your map to match the brand. It can also provide better ux depending on the use case of the app, also useful for theming your app. In this tutorial we will be building a map that changes style depending on the time of the day. It will have a normal map style during the day and a dark style during the night.

Setting up project

To generate a new ionic project, run the following command in the ionic cli:

 

 

 

iTechnoFreaks

 
  ionic start googleStyleMap blank

navigate into the project:

 

 

 

iTechnoFreaks

 
  cd googleStyleMap

If you check the folder you should see a src folder. Navigate into it, you should see pages, we will be using the home page inside the pages folder to display our map. Now let’s install the plugin Get the api key and add it to the following code

 

 

 

iTechnoFreaks

 
  ionic cordova plugin add https://github.com/mapsplugin/cordova-plugin-googlemaps#multiple_maps --variable API_KEY_FOR_ANDROID="YOUR_ANDROID_API_KEY_IS_HERE" --variable API_KEY_FOR_IOS="YOUR_IOS_API_KEY_IS_HERE"

Now we install the native wrapper

 

 

 

iTechnoFreaks

initMap(){
    let element = this.mapElement.nativeElement;
    let loc: LatLng = new LatLng(40.7128, -74.0059);
    let time = new Date().getHours();
    let style = [];

    //Change Style to night between 7pm to 5am
    if(this.isNight()){
        style = mapStyle
    }

    this.map = this._googleMaps.create(element,{ styles: style });

    this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
        this.moveCamera(loc);

    });
  }

We create an empty style array which we populate with our mapStyle we imported above if it is night or not. The create method takes an additional argument which is an object of settings for the map. One of the properties is the styles property which we can assign to our style array we just created.

Ionic Native: Implementing Google Maps

Introduction

Styling your native google map can be useful, if you have a brand and you want your map to match the brand. It can also provide better ux depending on the use case of the app, also useful for theming your app. In this tutorial we will be building a map that changes style depending on the time of the day. It will have a normal map style during the day and a dark style during the night.

Setting up project

To generate a new ionic project, run the following command in the ionic cli:

 

 

 

iTechnoFreaks

 
  ionic start googleStyleMap blank

navigate into the project:

 

 

 

iTechnoFreaks

 
  cd googleStyleMap

If you check the folder you should see a src folder. Navigate into it, you should see pages, we will be using the home page inside the pages folder to display our map. Now let’s install the plugin Get the api key and add it to the following code

 

 

 

iTechnoFreaks

 
  ionic cordova plugin add https://github.com/mapsplugin/cordova-plugin-googlemaps#multiple_maps --variable API_KEY_FOR_ANDROID="YOUR_ANDROID_API_KEY_IS_HERE" --variable API_KEY_FOR_IOS="YOUR_IOS_API_KEY_IS_HERE"

Now we install the native wrapper

 

 

 

iTechnoFreaks

 
  npm install --save @ionic-native/google-maps

Navigate to your app.module.ts file under app folder. Import { GoogleMaps } from "@ionic-native/google-maps" and add it to the providers. As shown below

 

 

 

iTechnoFreaks

 
  import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { GoogleMaps } from '@ionic-native/google-maps'

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    GoogleMaps,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Creating the map Now that the ionic native plugin has been set up, we can now create the map. Lets start by adding a map to the home page:

 

 

 

iTechnoFreaks

 
  
  
    
     Google Map Style
    
  



  

We need to modify the home.ts file to generate a map. Add the following to home.ts :

 

 

 

iTechnoFreaks

 
  import { Component, ElementRef, ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular';
import { GoogleMaps, GoogleMap, CameraPosition, LatLng, GoogleMapsEvent } from '@ionic-native/google-maps';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild('map') mapElement: ElementRef;
  map: GoogleMap;

  constructor(public navCtrl: NavController,private _googleMaps: GoogleMaps) { }

  ngAfterViewInit(){
    this.initMap();
  }

  initMap(){
    let element = this.mapElement.nativeElement;
    let loc: LatLng = new LatLng(40.7128, -74.0059);

    this.map = this._googleMaps.create(element,{ styles: []});

    this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
        this.moveCamera(loc);
    });
  }

  moveCamera(loc: LatLng){
      let options: CameraPosition = {
        target: loc,
        zoom: 15,
        tilt: 10
      }
      this.map.moveCamera(options);
  }

}

Now that we have created the map and the camera is currently pointing at Newyork. You should see the map on your device

Ionic 3 - Project Structure

Before we start building our application, let’s take a close look at the anatomy of an ionic application. Inside the folder that was created during the scaffold, you have a typical Cordova project structure where you’ll be able to install native plugins and create platform-specific project files.

./src/index.html

src/index.html is the main entry point for the app. Much like the index.html file from angular projects you worked on yesterday, you'll spend very little time in this file while building your application. It's main purpose is to setup script and CSS includes and bootstrap, or start running, our application.

For the app to function, Ionic will look for the <ion-app> tag in your index.html file. Think of this as the root component for your ionic application.

./src/

Inside the src directory, you'll find all your uncompiled code. This is where you'll spend most of your time while building your app. When you run ionic serve, all the code inside of src/ is transpiled into a Javascript version that is supported by most browser.

Adding a Page

Just like with rails and angular, Ionic provide us with a generator to scaffold the most common components to an app. We will be using that to generate a new page.

$ ionic g page calculator




If you take a look at your src/pages/ folder, you'll see that a new folder name calculator has been created.

Every time you created a new page, you need to tell the application about it by importing it in app.module.ts. Open it and add the following line at the top of it

import { CalculatorPage } from '../pages/calculator/calculator'




Then add CalculatorPage to the declarations and entryComponents properties. Next, we also import CalculatorPage in src/pages/tabs/tabs.ts and create a new tab for it.