Googlemap markericon not showing on map

[shivakumar116]

I am using ionic native google map for my project. When i run cordova run browser the marker is loading perfectly but when i run cordova run android i am getting red icon how to fix this

[wf9a5m75]

How do you write your code?

[wf9a5m75]

assets/icon/shivaicon.png instead of /assets/icon/shivaicon.png.

Check the location.href.

[shivakumar116]

How do you write your code?

i just created a marker and whenever there is change in location i am passing new position as parameter to setposition.

i am getting the below error when i debug using chrome://inspect

cannot read property setPosition 'setPosition' is undefined

@wf9a5m75 help me out

[wf9a5m75]

use this.addMarkerSync().

[wf9a5m75]

Please read slides before coding. https://docs.google.com/presentation/d/e/2PACX-1vScoho1ensbR4qCI9AIuQN55BZVvK73pAjI7sumDvW3CrxxHnrmpXWUjx2-8CpFibqU1EjLKCRhuthJ/pub?start=false&loop=false&delayms=3000&slide=id.p

[wf9a5m75]

Please read the slide. https://docs.google.com/presentation/d/e/2PACX-1vScoho1ensbR4qCI9AIuQN55BZVvK73pAjI7sumDvW3CrxxHnrmpXWUjx2-8CpFibqU1EjLKCRhuthJ/pub?start=false&loop=false&delayms=3000&slide=id.g39c2af405f_841_183

[wf9a5m75]

Please use proper markdown. (Do you think your comment is suite for readers?)

[shivakumar116]

ok please address my issue

[shivakumar116]

`

"dependencies": { "@angular/common": "^7.2.2", "@angular/core": "^7.2.2", "@angular/fire": "^5.2.1", "@angular/forms": "^7.2.2", "@angular/http": "^7.2.2", "@angular/platform-browser": "^7.2.2", "@angular/platform-browser-dynamic": "^7.2.2", "@angular/router": "^7.2.2", "@ionic-native/core": "^5.0.0", "@ionic-native/firebase": "^5.9.0", "@ionic-native/geolocation": "^5.9.0", "@ionic-native/google-maps": "^5.0.0-beta.27", "@ionic-native/splash-screen": "^5.0.0", "@ionic-native/status-bar": "^5.0.0", "@ionic-native/toast": "^5.9.0", "@ionic/angular": "^4.1.0", "@types/google-maps": "^3.2.1", "cordova-android": "8.0.0", "cordova-browser": "6.0.0", "cordova-ios": "5.0.1", "cordova-plugin-geolocation": "4.0.1", "cordova-plugin-googlemaps": "2.6.2", "cordova-plugin-x-toast": "2.7.2", "core-js": "^2.5.4", "firebase": "^6.2.4", "rxjs": "~6.5.1", "rxjs-compat": "^6.5.2", "tslib": "^1.9.0", "zone.js": "~0.8.29" },

`

[wf9a5m75]

I don't want to see your comment until you format your comment. Stressful.

[wf9a5m75]

https://guides.github.com/features/mastering-markdown/

[wf9a5m75]

https://github.com/ionic-team/ionic-native-google-maps/issues/232#issuecomment-513363256

[wf9a5m75]

Do you want to read messy code or organized code?

I just ask please use proper markdown.

[shivakumar116]

If u want I will send my typescript file directly to ur mail @wf9a5m75

[wf9a5m75]

:angry:

[shivakumar116]

import { AngularFirestore } from '@angular/fire/firestore';
import { Component, ViewChild } from '@angular/core';
import { Platform, NavController } from "@ionic/angular";
import { Geolocation } from '@ionic-native/geolocation/ngx'
import { AngularFirestoreModule, AngularFirestoreCollection, AngularFirestoreDocument } from '@angular/fire/firestore';
import { AngularFireStorageModule, AngularFireStorage } from '@angular/fire/storage';
import { firestore } from "firebase/app";

import { Observable } from 'rxjs/Observable'
import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent,
LatLng,
MarkerOptions,
Marker
} from "@ionic-native/google-maps";
import { MapType } from '@angular/compiler';
import { Toast } from '@ionic-native/toast/ngx';
import { ToastController } from '@ionic/angular';
import { Router } from "@angular/router";

declare var google;
@component({
    selector: 'app-userhome',
    templateUrl: './userhome.page.html',
    styleUrls: ['./userhome.page.scss'],
})
export class UserhomePage {
    @ViewChild('map') mapElemet;

    map: GoogleMap;
    noofdrivers: number;
    latfromdb: number;
    lonfromdb: number;
    busnum: number = null;
    driverlocationRef: AngularFirestoreCollection
    driverlocation$: Observable < driverlocation[] >
        maininfo: driverlocation
    Firsttime: boolean = true;
    mark: Marker;
    icon: any;
    // bus = document.getElementById('bus').getElementsByTagName('input')[0];

    constructor(
        public afs: AngularFirestore, 
        public platform: Platform,
        public ubusnos: UbusnoService,
        private toast: Toast,
        public toastController: ToastController,
        public router: Router) {}

    ngOnInit() {}

    ngAfterViewInit() {

        this.busnum = this.ubusnos.getubusno();
        let i = 0;
        this.driverlocationRef = this.afs.collection(`driverlocation`);
        this.driverlocation$ = this.driverlocationRef.valueChanges();
        this.driverlocation$.subscribe(info => {
            this.maininfo = info[0];
            this.noofdrivers = info.length;
            console.log(this.noofdrivers)
            for (i = 0; i < this.noofdrivers; i++) {
                this.maininfo = info[i];
                console.log(this.maininfo.busno)
                if (this.maininfo.busno === this.busnum) {

                    this.latfromdb = this.maininfo.lat;
                    this.lonfromdb = this.maininfo.lon;

                    break;
                } else {
                    if (i + 1 == this.noofdrivers) {
                        console.log(i)
                        console.log("In Else Block")
                        this.busnotonline();
                    }
                }
            }

            this.platform.ready().then(() => {
                if (this.Firsttime == true) {
                    this.loadMap();
                    this.Firsttime = false;
                } else {
                    this.marker();

                }
            });
        })
    }

    loadMap() {
        this.map = GoogleMaps.create('map');

        this.map.one(GoogleMapsEvent.MAP_READY).then((data: any) => {

            let coordinates: LatLng = new LatLng(this.latfromdb, this.lonfromdb);

            let position = {
                target: coordinates,
                zoom: 16
            };

            this.map.animateCamera(position);

            this.icon = {
                url: "assets/icon/shivaicon.png",
                size: {
                    width: 50,
                    height: 40
                },
                anchor: [15, 15],

            };

            let markerOptions: MarkerOptions = {
                position: coordinates,
                icon: this.icon,

            }

            this.mark = this.map.addMarkerSync(markerOptions);
            //  .then((marker: Marker) => {
            //  this.mark = marker;
            //});

            //   this.mark.showInfoWindow()

        })
    }

    marker() {

        let coordinates: LatLng = new LatLng(this.latfromdb, this.lonfromdb);

        this.mark.setPosition(coordinates);

        let position = {
            target: coordinates,
            zoom: 16,
        };

        this.map.animateCamera(position);
    }

    async busnotonline() {
        const toast = await this.toastController.create({
            message: 'Bus number ' + this.busnum + ' is currently offline ',
            duration: 3000,
            position: 'bottom'
        });
        toast.present();
        this.router.navigate(['/ubusno'])
    }

}

[shivakumar116]

@wf9a5m75 is the above one okay?

[wf9a5m75]

Yes, then please tell me where your problem is in your code?

[shivakumar116]

The icon is not updating on map whenever there is change in location

[wf9a5m75]

I mean where in your code.

[shivakumar116]

Whenever there is change in location the market is not updating to new position

[shivakumar116]

@wf9a5m75 the icon updating only when I zoom in the map

[shivakumar116]

Update : @wf9a5m75 the market is updating but is not updating correctly in Android phone but is updating perfectly in browse Anyone help me

@mlynch @ndrake @manucorporat

[wf9a5m75]

I can't see any marker.setIcon() in your code.

[shivakumar116]

I hope u didn't got my question I created a marker once then after that whenever there is change in location I updated the marker position using marker.setposition ()

My problem is that whenever I test app in real Android device the marker is not updating properly, but when I run ionic cordova run browser it is working fine

[shivakumar116]

Do I need to remove old marker and create new marker every time or if I use setposition existing marker will work?

[wf9a5m75]

You said marker icon, not marker position

[wf9a5m75]

The most case of marker position does not update is lat/lng are invalid, such as you pass string.

[shivakumar116]

If I pass invalid lat/lng why it is working in browser?

Today I tested using real device I said my brother to roam outside for testing so i started checking his position in browser and as well as in Android device the marker is updating in browser and it is moving so slowly in Android device it is moving but it is so much delay compared to browser

[wf9a5m75]

Browser is browser. Android is Android. Both are different platforms

[shivakumar116]

First understand my issue the marker is not updating it is only updating when I touch the map (like when I zomm in and zoom out) in Android. So what is the main problem here?

[wf9a5m75]

Please share your project files on GitHub repository

[shivakumar116]

Ok sure

[shivakumar116]

https://github.com/shivakumar116/Track-In

@wf9a5m75

[shivakumar116]

@wf9a5m75 is that okay?

[wf9a5m75]

Thank you. I built your app, but there was login page. What should I do?

[wf9a5m75]

I can't understand what you mean. Your app requests bus number to reach the map page. Please tell me the test bus number.

[shivakumar116]

Click on driver enter any random bus number and driver access key is 1230

[shivakumar116]

@wf9a5m75 is that okay?

[shivakumar116]

@wf9a5m75 i fixed by adding map.marker instead of map.animatecamera in my marker function. This fixed my issue