Google Maps in Ionic + Winkel 2

Question

Ich habe eine einfache Kontaktseite, auf die ich eine Google-Karte mit einem bestimmten Ort umfassen müssen, aber ich kann nicht zu

Meine sauberen HTML-Datei in die Lage sein scheine sieht wie folgt aus: mehrere Lösungen

import {Component} from '@angular/core'; 
import {NavController} from 'ionic-angular'; 
import {ApiRequest} from '../../../cck/cck'; 


@Component({ 
    templateUrl: 'build/pages/cck/contact/contact.html', 
}) 
export class Contact { 
    private contactPage: Object = {}; 

    constructor(private navController:NavController, private request: ApiRequest) { 
    } 
} 

ich möchte eine google-Karte innerhalb des div mit der ID Karte hinzuzufügen, und ich habe versucht:

<ion-header> 
    <ion-navbar primary> 
     <ion-title>Contact</ion-title> 
    </ion-navbar> 
</ion-header> 
<ion-content class="contactpage"> 
    <div id="map"></div> 
</ion-contant> 

Meine sauber .ts-Datei sieht wie folgt aus das habe ich online gefunden aber ich konnte nicht t machen irgendwelche von ihnen arbeiten

Hat jemand eine gute Demo?

Vielen Dank im Voraus

Answer 1

Google Maps hat ein URL-Format, das Sie für einen Ort, wie so suchen kann:

http://maps.google.com/?q=trumptower 

Der einfachste Weg, um Ihr Ziel zu erreichen, ist das InAppBrowser Plugin zu verwenden Öffnen eines neuen InAppBrowser-Fensters, das zu einer URL führt, die Sie basierend auf Ihrem Kontaktstandort erstellt haben. Das Tolle ist, wenn Sie Google Maps auf Ihrem Gerät installiert haben, öffnet sich die URL in der Google Maps-Anwendung.

HTML:

<button class="button button-full" ng-click="openMaps(contact)"> 
    Open in Maps 
</button> 

JS:

$scope.openMaps = function (contact) { 
    cordova.InAppBrowser.open('http://maps.google.com/?q=' + contact.location, '_system', 'location = yes'); 
    } 
} 

hoffe, das hilft!