**
I want to integrate Google map but no error on console and my api is enable also
**
this is my htmL
<div #map id="map"></div>
this is my CSS Class
.map-image{
height: 300px;
width: 100%;
this is my map.ts File
import { Component,ViewChild,ElementRef } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
declare var google;
@IonicPage()
@Component({
selector: 'page-adduser',
templateUrl: 'adduser.html',
})
export class adduserPage {
@ViewChild('map') mapElement: ElementRef;
map: any;
cartItems = [];
Destination: any = 'jaffna';
MyLocation: any;
currentLong: number;
currentLat: number;
constructor(public navCtrl: NavController, public navParams: NavParams,public geolocation: Geolocation,private el:ElementRef) {
}
ionViewDidLoad() {
this.calculateAndDisplayRoute();
}
calculateAndDisplayRoute() {
let that = this;
let directionsService = new google.maps.DirectionsService;
let directionsDisplay = new google.maps.DirectionsRenderer;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
map.setCenter(pos);
that.MyLocation = new google.maps.LatLng(pos);
console.log(position.coords.latitude, position.coords.longitude);
}, function () {
});
} else {
// Browser doesn't support Geolocation
}
const map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: that.MyLocation,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
that.map = new google.maps.Map(this.mapElement.nativeElement, map);
directionsDisplay.setMap(that.map);
}
}
CMD
Index.html File
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Ionic App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#4e8ef7">
<!-- cordova.js required for cordova apps -->
<script src="http://maps.google.com/maps/api/js?key=AIzaSyB4E0FGOKJCviq4yAQkWKG6928hJmrsZ8I"></script>
<script src="cordova.js"></script>
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.error('Error', err));
}
</script>-->
<link href="build/main.css" rel="stylesheet">
</head>
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The vendor js is generated during the build process
It contains all of the dependencies in node_modules -->
<script src="build/vendor.js"></script>
<!-- The main bundle js is generated during the build process -->
<script src="build/main.js"></script>
</body>
</html>
Console Screen
