Teaser Of Product Launch Poster Template

@@ -47,11 +47,11 @@ <h1>Venue & Hours</h1>
  </div>
 
  <ion-list lines="full">
- <ion-item button="true" (click)="openUrl('https://maps.apple.com/?address=300+E+Ocean+Blvd,+Long+Beach,+CA+90802')" detail="true">
+ <ion-item button="true" (click)="openDirections()" detail="true">
  <ion-icon slot="start" name="navigate-outline" color="primary"></ion-icon>
  <ion-label class="ion-text-wrap">
  <h2>Get Directions</h2>
- <p>Open in Maps</p>
+ <p>Pine Ave entrance &middot; Open in Maps</p>
  </ion-label>
  </ion-item>
 

Product Display Layout Mock Up PNG

@@ -1,5 +1,5 @@
 import { Component, OnInit, ChangeDetectorRef, ViewChild } from '@angular/core';
-import { IonContent } from '@ionic/angular';
+import { IonContent, Platform } from '@ionic/angular';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { forkJoin } from 'rxjs';
 import { ConferenceData } from '../../providers/conference-data';
@@ -33,6 +33,7 @@ export class VenuesHoursPage implements OnInit {
  private confData: ConferenceData,
  private changeDetection: ChangeDetectorRef,
  private sanitizer: DomSanitizer,
+ private platform: Platform,
  public liveUpdateService: LiveUpdateService,
  ) {}
 
@@ -44,6 +45,34 @@ export class VenuesHoursPage implements OnInit {
  window.open(url, '_system', 'location=yes');
  }
 
+ // Pine Ave entrance to the Long Beach Convention Center. Organizers asked
+ // to route attendees here rather than the generic 300 E Ocean Blvd lobby
+ // since Pine Ave is the closer pedestrian approach from the hotels.
+ // Coordinates: 33°45'52.0"N 118°11'30.2"W
+ private static readonly PINE_AVE_LAT = 33.764444;
+ private static readonly PINE_AVE_LNG = -118.191722;
+ private static readonly PINE_AVE_LABEL = 'Long Beach Convention Center (Pine Ave Entrance)';
+
+ openDirections() {
+ const lat = VenuesHoursPage.PINE_AVE_LAT;
+ const lng = VenuesHoursPage.PINE_AVE_LNG;
+ const label = VenuesHoursPage.PINE_AVE_LABEL;
+
+ let url: string;
+ if (this.platform.is('ios')) {
+ // Apple Maps: q= sets the pin label, ll= sets coords. dirflg=w means
+ // walking directions (Pine Ave is a pedestrian approach).
+ url = `https://maps.apple.com/?q=${encodeURIComponent(label)}&ll=${lat},${lng}&dirflg=w`;
+ } else if (this.platform.is('android')) {
+ // Android geo: URI opens the user's default maps app directly.
+ url = `geo:${lat},${lng}?q=${lat},${lng}(${encodeURIComponent(label)})`;
+ } else {
+ // PWA / web: Google Maps universal link.
+ url = `https://www.google.com/maps/search/?api=1&query=${lat},${lng}`;
+ }
+ window.open(url, '_system', 'location=yes');
+ }
+
  ngOnInit() {
  forkJoin({
  content: this.confData.getContent(),