I am currently working on developing an ionic2 application using TypeScript.
Within the index.html file, I have attempted to integrate jquery and the Google Maps JS API before cordova.js:
<!-- Vendor -->
<script src="https://maps.googleapis.com/maps/api/js?key=XXXXX&signed_in=false"></script>
<script src="asset/jquery.min.js"></script>
<!-- cordova.js required for cordova apps -->
<script src="cordova.js"></script>
The inclusion of Google Maps and jquery within the app is functioning properly, but I am puzzled by these error messages that appear when running the "ionic serve" command:
TypeScript error: /Users/xxx/client_app/app/pages/step1/step1.ts(15,21): Error TS2304: Cannot find name 'google'.
TypeScript error: /Users/xxx/client_app/app/pages/step1/step1.ts(30,18): Error TS2304: Cannot find name 'google'.
TypeScript error: /Users/xxx/client_app/app/pages/step1/step1.ts(37,24): Error TS2304: Cannot find name 'google'.
TypeScript error: /Users/xxx/client_app/app/pages/step1/step1.ts(39,5): Error TS2304: Cannot find name '$'.
TypeScript error: /Users/xxx/client_app/app/pages/step1/step1.ts(39,42): Error TS2304: Cannot find name '$'.
TypeScript error: /Users/xxx/client_app/app/pages/step1/step1.ts(39,76): Error TS2304: Cannot find name '$'.
Below is a segment of my code from step1.ts:
ngOnInit() {
this.gmap = new google.maps.Map(document.getElementById('gmap_canvas'), {
center: {
lat: 22.280102,
lng: 114.183751
},
zoom: 16,
streetViewControl: false,
styles : [{
featureType: "poi",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}],
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP]
},
overviewMapControl: false,
mapTypeControl: false,
});
this.gmap.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById('gmep_center_marker'));
$('#gmep_center_marker').css({ top: ($('#gmap_canvas').height() / 2) - $('#gmep_center_marker').height() });
}