Google Maps

Note: If you skipped ahead to this section, click here to download a zip of the tutorial at this point.

In this step we will add the ability to send the current location in Google Maps.

11.1 Add cordova plugin for geolocation .meteor/cordova-plugins

[email protected]

[email protected]

[email protected]

[email protected]

[email protected]

[email protected]

Improve this code

Geo Location

To get the devices location (aka geo-location) we will install a Cordova plug-in called cordova-plugin-geolocation which will provide us with these abilities:

$ meteor add cordova:[email protected]

Angular 2 Google Maps

Since the location is going to be presented with Google Maps, we will install a package which will help up interact with it in Angular 2:

$ meteor npm install --save angular2-google-maps

Before you import the installed package to the app's NgModule be sure to generate an API key. An API key is a code passed in by computer programs calling an API to identify the calling program, its developer, or its user to the Web site. To generate an API key go to Google Maps API documentation page and follow the instructions. Each app should have it's own API key, as for now we can just use an API key we generated for the sake of this tutorial, but once you are ready for production, replace the API key in the script below:

11.3 Import google maps module client/imports/app/app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';

import { AgmCoreModule } from 'angular2-google-maps/core';

import { MomentModule } from 'angular2-moment';

import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';

import { ChatsPage } from '../pages/chats/chats'

...some lines skipped...

],

  imports: [

    IonicModule.forRoot(MyApp),

    MomentModule,

    AgmCoreModule.forRoot({

      apiKey: 'AIzaSyAWoBdZHCNh5R-hB5S5ZZ2oeoYyfdDgniA'

})

],

  bootstrap: [IonicApp],

  entryComponents: [

Improve this code

Before we proceed any further, we will add a new message type to our schema, so we can differentiate between a text message and a location message:

11.4 Added location message type imports/models.ts

export enum MessageType {

  TEXT = <any>'text',

  LOCATION = <any>'location'

export interface Chat {

Improve this code

We want the user to be able to send a location message through an attachments menu in the MessagesPage, so let's implement the initial MessagesAttachmentsComponent, and as we go through, we will start filling it up:

11.5 Added stub for messages attachment menu client/imports/pages/messages/messages-attachments.ts

import { Component } from '@angular/core';

import { AlertController, Platform, ModalController, ViewController } from 'ionic-angular';

import template from './messages-attachments.html';

@Component({

  template

})

export class MessagesAttachmentsComponent {

  constructor(

    private alertCtrl: AlertController,

    private platform: Platform,

    private viewCtrl: ViewController,

    private modelCtrl: ModalController

  ) {}

Improve this code

11.6 Added messages attachment menu template client/imports/pages/messages/messages-attachments.html

<ion-content class="messages-attachments-page-content">

  <ion-list class="attachments">

    <button ion-item class="attachment attachment-gallery">

      <ion-icon name="images" class="attachment-icon"></ion-icon>

      <div class="attachment-name">Gallery</div>

    </button>

    <button ion-item class="attachment attachment-camera">

      <ion-icon name="camera" class="attachment-icon"></ion-icon>

      <div class="attachment-name">Camera</div>

    </button>

    <button ion-item class="attachment attachment-location">

      <ion-icon name="locate" class="attachment-icon"></ion-icon>

      <div class="attachment-name">Location</div>

    </button>

  </ion-list>

</ion-content>

Improve this code

11.7 Added styles for messages attachment client/imports/pages/messages/messages-attachments.scss

.messages-attachments-page-content {

  $icon-background-size: 60px;

  $icon-font-size: 20pt;

  .attachments {

    width: 100%;

    margin: 0;

    display: inline-flex;

  .attachment {

    text-align: center;

    margin: 0;

    padding: 0;

    .item-inner {

      padding: 0

    .attachment-icon {

      width: $icon-background-size;

      height: $icon-background-size;

      line-height: $icon-background-size;

      font-size: $icon-font-size;

      border-radius: 50%;

      color: white;

      margin-bottom: 10px

    .attachment-name {

      color: gray;

  .attachment-gallery .attachment-icon {

    background: linear-gradient(#e13838 50%, #f53d3d 50%);

  .attachment-camera .attachment-icon {

    background: linear-gradient(#3474e1 50%, #387ef5 50%);

  .attachment-location .attachment-icon {

    background: linear-gradient(#2ec95c 50%, #32db64 50%);

Improve this code

11.8 Import MessagesAttachmentsComponent client/imports/app/app.module.ts

import { NewChatComponent } from '../pages/chats/new-chat';

import { LoginPage } from '../pages/login/login';

import { MessagesPage } from '../pages/messages/messages';

import { MessagesAttachmentsComponent } from '../pages/messages/messages-attachments';

import { MessagesOptionsComponent } from '../pages/messages/messages-options';

import { ProfilePage } from '../pages/profile/profile';

import { VerificationPage } from '../pages/verification/verification';

...some lines skipped...

    ProfilePage,

    ChatsOptionsComponent,

    NewChatComponent,

    MessagesOptionsComponent,

    MessagesAttachmentsComponent

],

  imports: [

    IonicModule.forRoot(MyApp),

...some lines skipped...

    ProfilePage,

    ChatsOptionsComponent,

    NewChatComponent,

    MessagesOptionsComponent,

    MessagesAttachmentsComponent

],

  providers: [

    { provide: ErrorHandler, useClass: IonicErrorHandler },

Improve this code

We will add a generic style-sheet for the attachments menu since it can also use us in the future:

11.9 Added styles for the popover container client/imports/app/app.scss

  left: calc(100% - #{$options-popover-width} - #{$options-popover-margin}) !important;

  top: $options-popover-margin !important;

// Attachments Popover Component

// --------------------------------------------------

$attachments-popover-width: 100%;

.attachments-popover .popover-content {

  width: $attachments-popover-width;

  transform-origin: 300px 30px !important;

  left: calc(100% - #{$attachments-popover-width}) !important;

  top: 58px !important;

Improve this code

Now we will add a handler in the MessagesPage which will open the newly created menu, and we will bind it to the view:

11.10 Add showAttachments method client/imports/pages/messages/messages.ts

import { Observable, Subscription, Subscriber } from 'rxjs';

import { Messages } from '../../../../imports/collections';

import { Chat, Message, MessageType } from '../../../../imports/models';

import { MessagesAttachmentsComponent } from './messages-attachments';

import { MessagesOptionsComponent } from './messages-options';

import template from './messages.html';

...some lines skipped...

      this.message = '';

});

  showAttachments(): void {

    const popover = this.popoverCtrl.create(MessagesAttachmentsComponent, {

      chat: this.selectedChat

    }, {

      cssClass: 'attachments-popover'

});

    popover.onDidDismiss((params) => {

      // TODO: Handle result

});

    popover.present();

Improve this code

11.11 Bind click event to showAttachments client/imports/pages/messages/messages.html

    <ion-title class="chat-title">{{title}}</ion-title>

    <ion-buttons end>

      <button ion-button icon-only class="attach-button" (click)="showAttachments()"><ion-icon name="attach"></ion-icon></button>

      <button ion-button icon-only class="options-button" (click)="showOptions()"><ion-icon name="more"></ion-icon></button>

    </ion-buttons>

  </ion-navbar>

Improve this code

Sending Location

A location is a composition of longitude, latitude and an altitude, or in short: long, lat, alt. Let's define a new Location model which will represent the mentioned schema:

11.12 Added location model imports/models.ts

export interface User extends Meteor.User {

  profile?: Profile;

export interface Location {

  lat: number;

  lng: number;

  zoom: number;

Improve this code

Up next, would be implementing the actual component which will handle geo-location sharing:

11.13 Implement location message component client/imports/pages/messages/location-message.ts

import { Component, OnInit, OnDestroy } from '@angular/core';

import { Platform, ViewController } from 'ionic-angular';

import { Geolocation } from 'ionic-native';

import { Observable, Subscription } from 'rxjs';

import { Location } from '../../../../imports/models';

import template from './location-message.html';

const DEFAULT_ZOOM = 8;

const EQUATOR = 40075004;

const DEFAULT_LAT = 51.678418;

const DEFAULT_LNG = 7.809007;

const LOCATION_REFRESH_INTERVAL = 500;

@Component({

  template

})

export class NewLocationMessageComponent implements OnInit, OnDestroy {

  lat: number = DEFAULT_LAT;

  lng: number = DEFAULT_LNG;

  zoom: number = DEFAULT_ZOOM;

  accuracy: number = -1;

  intervalObs: Subscription;

  constructor(private platform: Platform, private viewCtrl: ViewController) {

  ngOnInit() {

    // Refresh location at a specific refresh rate

    this.intervalObs = this.reloadLocation()

      .flatMapTo(Observable

        .interval(LOCATION_REFRESH_INTERVAL)

        .timeInterval())

      .subscribe(() => {

        this.reloadLocation();

});

  ngOnDestroy() {

    // Dispose subscription

    if (this.intervalObs) {

      this.intervalObs.unsubscribe();

  calculateZoomByAccureacy(accuracy: number): number {

    // Source: http://stackoverflow.com/a/25143326

    const deviceHeight = this.platform.height();

    const deviceWidth = this.platform.width();

    const screenSize = Math.min(deviceWidth, deviceHeight);

    const requiredMpp = accuracy / screenSize;

    return ((Math.log(EQUATOR / (256 * requiredMpp))) / Math.log(2)) + 1;

  reloadLocation() {

    return Observable.fromPromise(Geolocation.getCurrentPosition().then((position) => {

      if (this.lat && this.lng) {

        // Update view-models to represent the current geo-location

        this.accuracy = position.coords.accuracy;

        this.lat = position.coords.latitude;

        this.lng = position.coords.longitude;

        this.zoom = this.calculateZoomByAccureacy(this.accuracy);

    }));

  sendLocation() {

    this.viewCtrl.dismiss(<Location>{

      lat: this.lat,

      lng: this.lng,

      zoom: this.zoom

});

Improve this code

Basically, what this component does is refreshing the current geo-location at a specific refresh rate. Note that in order to fetch the geo-location we use Geolocation's API, but behind the scene it uses `cordova-plugin-geolocation. The sendLocation method dismisses the view and returns the calculated geo-location. Now let's added the component's corresponding view:

11.14 Added location message template client/imports/pages/messages/location-message.html

<ion-header>

  <ion-toolbar color="whatsapp">

    <ion-title>Send Location</ion-title>

    <ion-buttons end>

      <button ion-button class="dismiss-button" (click)="viewCtrl.dismiss()"><ion-icon name="close"></ion-icon></button>

    </ion-buttons>

  </ion-toolbar>

</ion-header>

<ion-content class="location-message-content">

  <ion-list>

    <sebm-google-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">

      <sebm-google-map-marker [latitude]="lat" [longitude]="lng"></sebm-google-map-marker>

    </sebm-google-map>

    <ion-item (click)="sendLocation()">

      <ion-icon name="compass" item-left></ion-icon>

      <h2>Send your current location</h2>

      <p *ngIf="accuracy !== -1">Accurate to {{accuracy}} meters</p>

    </ion-item>

  </ion-list>

</ion-content>

Improve this code

The sebm-google-map is the component which represents the map itself, and we provide it with lat, lng and zoom, so the map can be focused on the current geo-location. If you'll notice, we also used the sebm-google-map-marker component with the same data-models, so the marker will be shown right in the center of the map.

Now we will add some CSS to make sure the map is visible:

11.15 Added location message stylesheet client/imports/pages/messages/location-message.scss

.location-message-content {

  .scroll-content {

    margin-top: 44px;

  sebm-google-map {

    padding: 0;

  .sebm-google-map-container {

    height: 300px;

    margin-top: -15px;

Improve this code

And we will import the component:

11.16 Import NewLocationMessageComponent client/imports/app/app.module.ts

import { MessagesPage } from '../pages/messages/messages';

import { MessagesAttachmentsComponent } from '../pages/messages/messages-attachments';

import { MessagesOptionsComponent } from '../pages/messages/messages-options';

import { NewLocationMessageComponent } from '../pages/messages/location-message';

import { ProfilePage } from '../pages/profile/profile';

import { VerificationPage } from '../pages/verification/verification';

import { PhoneService } from '../services/phone';

...some lines skipped...

    ChatsOptionsComponent,

    NewChatComponent,

    MessagesOptionsComponent,

    MessagesAttachmentsComponent,

    NewLocationMessageComponent

],

  imports: [

    IonicModule.forRoot(MyApp),

...some lines skipped...

    ChatsOptionsComponent,

    NewChatComponent,

    MessagesOptionsComponent,

    MessagesAttachmentsComponent,

    NewLocationMessageComponent

],

  providers: [

    { provide: ErrorHandler, useClass: IonicErrorHandler },

Improve this code

The component is ready. The only thing left to do would be revealing it. So we will add the appropriate handler in the MessagesAttachmentsComponent:

11.17 Implement the sendLocation message to display the new location modal client/imports/pages/messages/messages-attachments.ts

import { Component } from '@angular/core';

import { AlertController, Platform, ModalController, ViewController } from 'ionic-angular';

import { MessageType } from '../../../../imports/models';

import { NewLocationMessageComponent } from './location-message';

import template from './messages-attachments.html';

@Component({

...some lines skipped...

    private viewCtrl: ViewController,

    private modelCtrl: ModalController

  ) {}

  sendLocation(): void {

    const locationModal = this.modelCtrl.create(NewLocationMessageComponent);

    locationModal.onDidDismiss((location) => {

      if (!location) {

        this.viewCtrl.dismiss();

        return;

      this.viewCtrl.dismiss({

        messageType: MessageType.LOCATION,

        selectedLocation: location

});

});

    locationModal.present();

Improve this code

And we will bind it to its view:

11.18 Bind click event to sendLocation client/imports/pages/messages/messages-attachments.html

      <div class="attachment-name">Camera</div>

    </button>

    <button ion-item class="attachment attachment-location" (click)="sendLocation()">

      <ion-icon name="locate" class="attachment-icon"></ion-icon>

      <div class="attachment-name">Location</div>

    </button>

Improve this code

Now we will implement a new method in the MessagesPage, called sendLocationMessage, which will create a string representation of the current geo-location and send it to the server:

11.19 Implement send location message client/imports/pages/messages/messages.ts

import * as Moment from 'moment';

import { Observable, Subscription, Subscriber } from 'rxjs';

import { Messages } from '../../../../imports/collections';

import { Chat, Message, MessageType, Location } from '../../../../imports/models';

import { MessagesAttachmentsComponent } from './messages-attachments';

import { MessagesOptionsComponent } from './messages-options';

import template from './messages.html';

...some lines skipped...

});

  sendLocationMessage(location: Location): void {

    MeteorObservable.call('addMessage', MessageType.LOCATION,

      this.selectedChat._id,

      `${location.lat},${location.lng},${location.zoom}`

    ).zone().subscribe(() => {

      // Zero the input field

      this.message = '';

});

  showAttachments(): void {

    const popover = this.popoverCtrl.create(MessagesAttachmentsComponent, {

      chat: this.selectedChat

...some lines skipped...

});

    popover.onDidDismiss((params) => {

      if (params) {

        if (params.messageType === MessageType.LOCATION) {

          const location = params.selectedLocation;

          this.sendLocationMessage(location);

});

    popover.present();

Improve this code

This requires us to update the addMessage method in the server so it can support location typed messages:

11.20 Allow location message type on server side server/methods.ts

    if (!this.userId) throw new Meteor.Error('unauthorized',

      'User must be logged-in to create a new chat');

    check(type, Match.OneOf(String, [ MessageType.TEXT, MessageType.LOCATION ]));

    check(chatId, nonEmptyString);

    check(content, nonEmptyString);

Improve this code

Viewing Location Messages

The infrastructure is ready, but we can't yet see the message, therefore, we will need to add support for location messages in the MessagesPage view:

11.21 Implement location message view client/imports/pages/messages/messages.html

      <div *ngFor="let message of day.messages" class="message-wrapper">

        <div [class]="'message message-' + message.ownership">

          <div *ngIf="message.type == 'text'" class="message-content message-content-text">{{message.content}}</div>

          <div *ngIf="message.type == 'location'" class="message-content message-content-text">

            <sebm-google-map [zoom]="getLocation(message.content).zoom" [latitude]="getLocation(message.content).lat" [longitude]="getLocation(message.content).lng">

              <sebm-google-map-marker [latitude]="getLocation(message.content).lat" [longitude]="getLocation(message.content).lng"></sebm-google-map-marker>

            </sebm-google-map>

          </div>

          <span class="message-timestamp">{{ message.createdAt | amDateFormat: 'HH:mm' }}</span>

        </div>

      </div>

Improve this code

These additions looks pretty similar to the LocationMessage since they are based on the same core components.

We will now add a method which can parse a string representation of the location into an actual JSON:

11.22 Implement getLocation for parsing the location client/imports/pages/messages/messages.ts

    popover.present();

  getLocation(locationString: string): Location {

    const splitted = locationString.split(',').map(Number);

    return <Location>{

      lat: splitted[0],

      lng: splitted[1],

      zoom: Math.min(splitted[2] || 0, 19)

};

Improve this code

And we will make some final adjustments for the view so the map can be presented properly:

11.23 Added map styles client/imports/pages/messages/messages.scss

        content: " \00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0";

        display: inline;

      .sebm-google-map-container {

        height: 25vh;

        width: 35vh;

    .message-timestamp {

Improve this code

{{{nav_step prev_ref="https://angular-meteor.com/tutorials/whatsapp2/meteor/filter-and-pagination" next_ref="https://angular-meteor.com/tutorials/whatsapp2/meteor/file-upload"}}}

WhatsApp Clone with Ionic 2 and Meteor CLI

https://github.com/Urigo/Ionic2-MeteorCLI-WhatsApp

Socially Merge Version (Last Update: 14.02.2017)

Legacy Tutorial

22.11.2016

Socially Merge

14.02.2017

Google Maps

Geo Location

Angular 2 Google Maps

Attachments Menu

Sending Location

Viewing Location Messages