i am using the code that is in the documentation, this one :
import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent,
LatLng,
CameraPosition,
MarkerOptions,
Marker
} from '@ionic-native/google-maps';
export class MapPage {
constructor(private googleMaps: GoogleMaps) {}
// Load map only after view is initialized
ngAfterViewInit() {
this.loadMap();
}
loadMap() {
// make sure to create following structure in your view.html file
// and add a height (for example 100%) to it, else the map won't be visible
//
// <div #map id="map" style="height:100%;">
//
// create a new map by passing HTMLElement
let element: HTMLElement = document.getElementById('map');
let map: GoogleMap = this.googleMaps.create(element);
// listen to MAP_READY event
// You must wait for this event to fire before adding something to the map or modifying it in anyway
map.one(GoogleMapsEvent.MAP_READY).then(
() => {
console.log('Map is ready!');
// Now you can add elements to the map like the marker
}
);
// create LatLng object
let ionic: LatLng = new LatLng(43.0741904,-89.3809802);
// create CameraPosition
let position: CameraPosition = {
target: ionic,
zoom: 18,
tilt: 30
};
// move the map's camera to position
map.moveCamera(position);
// create new marker
let markerOptions: MarkerOptions = {
position: ionic,
title: 'Ionic'
};
const marker: Marker = map.addMarker(markerOptions)
.then((marker: Marker) => {
marker.showInfoWindow();
});
}
}
It shows me a blank page . i inspect the element and the <div #map id=“map”> has nothing on it. Please help
Do you get any errors perhaps? You are testing on a device right?
No errors, i made a console.log of all the elements and there all fine. Yes i am testing with ionic run android -lc
It’s not the console logs I’m interested in. When you run on a device, just with ionic cordova run android and then open up your chrome inspector, are you getting any errors logged in the console over there? Did you setup and add your google maps token as your supposed to?
ngAfterViewInit() {
this.loadMap();
}
That’s a specific Angular2 hook, is this an IonicPage or a custom component? Because if it’s the first, you should just use ionViewDidLoad() (ionic specific)
I try with ionViewDidLoad() because is a page but now i get this errors :
error opening ws message: {“category”:“console”,“type”:“log”,“data”:[“element”,{}]}
[11:30:21] error opening ws message: {“category”:“console”,“type”:“log”,“data”:[“map”,{"_objectInstance":{}}]}
[11:30:24] console.log: Map is ready!
[11:30:24] error opening ws message:
{“category”:“console”,“type”:“log”,“data”:[“latlo”,{“lat”:43.0741904,“lng”:-89.3809802}]}
[11:30:25] error opening ws message:
{“category”:“console”,“type”:“log”,“data”:[“position”,{“target”:{“lat”:43.0741904,“lng”:-89.3809802},“zoom”:18,“tilt”:30}]}
let element: HTMLElement = document.getElementById('map');
console.log("element", element)
//<img id="map" src="https://maps.googleapis.com/maps/api/staticmap?center=-38.0618359,-57…rs=size:mid%7Ccolor:0xff0000%7Clabel:%7C-38.0618359,-57.546104000000014" class="_gmaps_cdv_" style="background-color: rgba(0, 0, 0, 0);">
let map: GoogleMap = this.googleMaps.create(element);
console.log("map", map)
//GoogleMap {_objectInstance: App}
let ionic: LatLng = new LatLng(43.0741904, -89.3809802);
console.log("latlo", ionic)
//LatLng {lat: 43.0741904, lng: -89.3809802}
let position: CameraPosition = {
target: ionic,
zoom: 18,
tilt: 30
};
console.log("position", position)
//Object {target: LatLng, zoom: 18, tilt: 30}
Everything seems fine , now i checked in the inspector with remote devices and i have no errors. I dont know what could be. If anyone can please try the documentantion code to see if it is correct
I think the documentation is missing the @component decorator with the templateUrl
I think @ViewChild is preferable to calling methods on document.
same issue
still map can’t be loaded. found an empty div
<html lang="en" dir="ltr" __plugindomid="pgm441418169159" class="_gmaps_cdv_"><head>
<script data-ionic="inject">
(function(w){var i=w.Ionic=w.Ionic||{};i.version='3.9.2';i.angular='5.2.9';i.staticDir='build/';})(window);
</script>
<meta charset="UTF-8">
<title>Ionic App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-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">
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- cordova.js required for cordova apps (remove if not needed) -->
<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">
<script src="file:///android_asset/www/cordova_plugins.js"></script><script src="file:///android_asset/www/plugins/cordova-plugin-device/www/device.js"></script><script src="file:///android_asset/www/plugins/cordova-plugin-splashscreen/www/splashscreen.js"></script><script src="file:///android_asset/www/plugins/cordova-plugin-ionic-keyboard/www/android/keyboard.js"></script><script src="file:///android_asset/www/plugins/cordova-plugin-googlemaps/www/BaseClass.js"></script><script src="file:///android_asset/www/plugins/cordova-plugin-googlemaps/www/BaseArrayClass.js"></script><script src="file:///android_asset/www/plugins/cordova-plugin-googlemaps/www/LatLng.js"></script><script src="file:///android_asset/www/plugins/cordova-plugin-googlemaps/www/LatLngBounds.js"></script><script src="file:///android_asset/www/plugins/cordova-plugin-googlemaps/www/VisibleRegion.js"></script><script src="file:///android_asset/www/plugins/cordova-plugin-googlemaps/www/Location.js"></script><script src="file:///android_asset/www/plugins/cordova-plugin-googlemaps/www/CameraPosition.js"></script><script src="file:///android_asset/www/plugins/cordova-plugin-googlemaps/www/Polyline.js"></script><script src="file:///android_asset/www/plugins/cordova-plugin-googlemaps/www/Polygon.js"></script><script src="file:///android_asset/www/plugins/cordova-plugin-googlemaps/www/Marker.js"></script><script src="file:///android_asset/www/plugins/cordova-plugin-googlemaps/www/HtmlInfoWindow.js"></script><script src="file:///android_asset/www/plugins/cordova-plugin-googlemaps/www/Circle.js"></script><script src="file:///android_asset/www/plugins/cordova-plugin-googlemaps/www/TileOverlay.js"></script><script src="file:///android_asset/www/plugins/cordova-plugin-googlemaps/www/GroundOverlay.js"></script><script src="file:///android_asset/www/plugins/cordova-plugin-googlemaps/www/Common.js"></script><script src="file:///android_asset/www/plugins/cordova-plugin-googlemaps/www/encoding.js"></script><script src="file:///android_asset/www/plugins/cordova-plugin-googlemaps/www/spherical.js"></script><script src="file:///android_asset/www/plugins/cordova-plugin-googlemaps/www/poly.js"></script><script src="file:///android_asset/www/plugins/cordova-plugin-googlemaps/www/Geocoder.js"></script><script src="file:///android_asset/www/plugins/cordova-plugin-googlemaps/www/LocationService.js"></script><script src="file:///android_asset/www/plugins/cordova-plugin-googlemaps/www/Map.js"></script><script src="file:///android_asset/www/plugins/cordova-plugin-googlemaps/www/event.js"></script><script src="file:///android_asset/www/plugins/cordova-plugin-googlemaps/www/MapTypeId.js"></script><script src="file:///android_asset/www/plugins/cordova-plugin-googlemaps/www/KmlOverlay.js"></script><script src="file:///android_asset/www/plugins/cordova-plugin-googlemaps/www/KmlLoader.js"></script><script src="file:///android_asset/www/plugins/cordova-plugin-googlemaps/www/Environment.js"></script><script src="file:///android_asset/www/plugins/cordova-plugin-googlemaps/www/MarkerCluster.js"></script><script src="file:///android_asset/www/plugins/cordova-plugin-googlemaps/www/Cluster.js"></script><script src="file:///android_asset/www/plugins/cordova-plugin-googlemaps/www/geomodel.js"></script><script src="file:///android_asset/www/plugins/cordova-plugin-googlemaps/www/commandQueueExecutor.js"></script><script src="file:///android_asset/www/plugins/cordova-plugin-googlemaps/www/pluginInit.js"></script><script src="file:///android_asset/www/plugins/cordova-plugin-googlemaps/www/CordovaGoogleMaps.js"></script><script src="file:///android_asset/www/plugins/cordova-plugin-googlemaps/www/googlemaps-cdv-plugin.js"></script><script src="file:///android_asset/www/plugins/cordova-plugin-statusbar/www/statusbar.js"></script><style type="text/css">html, body, ._gmaps_cdv_ { background-image: url() !important; background: rgba(0,0,0,0) url() !important; background-color: rgba(0,0,0,0) !important;}._gmaps_cdv_ .nav-decor { background-color: rgba(0,0,0,0) !important; background: rgba(0,0,0,0) !important; display:none !important;}.framework7-root .page-previous { display:none !important;}</style></head>
<body __plugindomid="root" class="_gmaps_cdv_">
<!-- Ionic's root component and where the app will load -->
<ion-app class="app-root app-root-md md platform-cordova platform-mobile platform-android platform-android4 platform-android4_4 platform-tablet _gmaps_cdv_" ng-version="5.2.9" __plugindomid="pgm357212885686"><div app-viewport=""></div><ng-component class="app-root _gmaps_cdv_" __plugindomid="pgm1393726670410"><ion-nav __plugindomid="pgm445749506023" class="_gmaps_cdv_"><div nav-viewport=""></div><page-home class="ion-page show-page _gmaps_cdv_" style="z-index: 100;" __plugindomid="pgm930323011229"><div id="map_canvas" __plugindomid="pgm1352205365253" __pluginmapid="map_0_1270278517228" style="background-color: rgba(200, 200, 200, 0.498039); position: relative; overflow: hidden;" class="_gmaps_cdv_"><div style="position: absolute; left: 0px; top: 0px; width: 0px; height: 0px; overflow: visible; z-index: 0;" __plugindomid="pgm1373477543205"></div></div>
</page-home><div class="nav-decor"></div></ion-nav>
</ng-component><div overlay-portal=""></div><div overlay-portal=""></div><div class="loading-portal" overlay-portal=""></div><div class="toast-portal" __plugindomid="pgm1211771946948"></div><div class="click-block click-block-enabled" __plugindomid="pgm65499636085"></div></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>
plugin added _gmaps_cdv classes in every parent element. don’t know what had happened. help us out.
