Использования Google Maps в ионическом + угловом 2

Question

У меня есть простая контактная страница, на которой я должен включить Google карту с определенным местом, но я не могу показаться, чтобы иметь возможность

Моего чистый файла .html выглядит следующим образом:

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

Мой чистый ts-файл выглядит следующим образом:

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) { 
    } 
} 

Я хотел бы добавить карту Google внутри DIV с ID карты, и я попытался несколько решений что я нашел онлайн, но я не мог т любой из них работает

Есть ли у кого хорошая демонстрация?

Спасибо заранее

Answer 1

Google Maps имеет формат URL-адрес, который позволяет выполнить поиск местоположения, например, так:

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

Самый простой путь для достижения своей цели, чтобы использовать плагин InAppBrowser чтобы открыть новое окно InAppBrowser, которое отправляется на URL-адрес, который вы создаете, исходя из вашего местоположения контакта. Самое приятное, что если на вашем устройстве установлены Карты Google, URL-адрес откроется в приложении Google Maps.

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'); 
    } 
} 

Надеется, что это помогает!