Google Maps Native plugin - markers not appearing to update after setLocation()

I am running the Google maps native ionic plugin with a marker (runnner) that is moved with each click of a button, like so:

  onButtonClick() {
      let position = this.runner.getPosition();
      console.log(position);
      position.lat = position.lat + 0.0001;
      position.lng = position.lng + 0.0001;
      this.runner.setPosition(position);
  }

This works as expected with the first click of the button - I see the marker move on the map and the console output confirms that the position has been updated. Subsequent clicks of the button do correctly update the lat/lng of the marker, as shown by the console output, but I don’t see the marker move any further on the map. What’s going on? Is there some kind of DOM refresh function I need to be calling?

Continuing the discussion from Google Maps Native plugin - markers not appearing to update after setLocation():

Here is the entire code, if that helps!

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {Observable} from 'rxjs/Rx';

import { GoogleMaps, GoogleMap, GoogleMapsEvent, GoogleMapOptions, Marker, MarkerCluster, LatLng } from '@ionic-native/google-maps';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {

  map: GoogleMap;
  runner: Marker;
  zombies: Zombie[] = [];

  constructor(public navCtrl: NavController) {}

  ionViewDidLoad() {
    this.loadMap();
    // setup Observable to regularly execute gameloop
    let sub = Observable.interval(1000).subscribe((val) => { this.gameloop(); })
    // sub.unsubscribe();
    // to stop it
  }

  loadMap() {
      let mapOptions: GoogleMapOptions = {
        camera: {
           target: {
             lat: 51.587432,
             lng: -0.319744
           },
           zoom: 18,
           tilt: 30
         }
      };
      this.map = GoogleMaps.create('map_canvas', mapOptions);

      this.runner = this.map.addMarkerSync({
        title: 'you',
        icon: { url: 'assets/art/runner.png'},
        animation: 'DROP',
        position: {
            lat: 51.587432,
            lng: -0.319744
        }
      });
      for (let i = 0; i < 10; i++) {
        this.zombies.push(new Zombie(51.588432-i*0.0001, -0.318744+i*0.0001, this.map));
      }
  }

  gameloop() {
    //for (let i = 0; i < this.zombies.length; i++)
      //this.zombies[i].stagger();
    this.zombies[0].stagger();
  }

  onButtonClick() {
      let position = this.runner.getPosition();
      console.log(position);
      position.lat = position.lat + 0.0001;
      position.lng = position.lng + 0.0001;
      this.runner.setPosition(position);
  }
}

class Zombie {
  position: LatLng;
  marker: Marker;
  //map: GoogleMap;

  constructor(lat:number, lng:number, map:GoogleMap) {
    this.position = new LatLng(lat, lng);
    //this.map = map;
    this.marker = map.addMarkerSync({
      title: 'zombie!',
      icon: { url: 'assets/art/zombie.png'},
      animation: 'DROP',
      position: this.position
    });
  }

  stagger() {
    this.position.lng = this.position.lng + 0.0001;
    this.position.lat = this.position.lat + 0.0001;
    this.marker.setPosition(this.position);
    console.log("Zombie position: " + this.position);
  }
}

How about this?

class Zombie {
  position: LatLng;
  marker: Marker;
  //map: GoogleMap;

  constructor(lat:number, lng:number, map:GoogleMap) {
    this.position = {
     lat: lat,
     lng: lng
    };
    //this.map = map;
    this.marker = map.addMarkerSync({
      title: 'zombie!',
      icon: { url: 'assets/art/zombie.png'},
      animation: 'DROP',
      position: this.position
    });
  }

  stagger() {
    this.position.lng = this.position.lng + 0.0001;
    this.position.lat = this.position.lat + 0.0001;
    this.marker.setPosition(this.position);
    console.log("Zombie position: " + this.position);
  }
}

same behaviour. The zombie will move the first step but on subsequent steps, the console shows it’s position to be moving as expected but visually, it has only moved once.

Um, please share the project files, including src, assets,package.json and others(necessary files), on github. (only maps part is fine)

Thank you, but it seems there is no map code…

I’m not totally sure what you mean by map code? This uses the cordova native Google Map plugin https://github.com/ionic-team/ionic-native-google-maps

You won’t be able to run this in a browser or - I’m using my phone via USB

No, I mean home.ts is empty.

You know what I create @ionic-native/google-maps. That’s why I’m helping you.

oh yeah, that’s so strange - I’ve actually not used git before, it appears to have uploaded a blank template, but I don’t know why because the source is demonstrably not this!

indigo@Users-MacBook-Air:~/ionictemplates/mapapp$ head ./src/pages/home/home.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {Observable} from 'rxjs/Rx';

import { GoogleMaps, GoogleMap, GoogleMapsEvent, GoogleMapOptions, Marker, MarkerCluster, LatLng } from '@ionic-native/google-maps';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
indigo@Users-MacBook-Air:~/ionictemplates/mapapp$ git push -u origin master
Branch 'master' set up to track remote branch 'master' from 'origin'.
Everything up-to-date

I recommend you use https://desktop.github.com/ or https://www.sourcetreeapp.com/ for git beginner.

Ok got it all up on github now https://github.com/ezekielincorrigible/zombiechase

(I was pretty knackered late last night but I’m quite perplexed as to how the ionic blank template code that doesn’t even exist on my computer, as far as I am aware, was uploaded but w/ever…)

Well, I’m sure you’re the best person I could possibly be getting help from! Do you think I have made a programming error or have I uncovered a bug? If so, is there a workaround? If it’s useful, I’d be happy to make a minimal reproducible example and raise a bug report on the github?

Thank you for waiting. I confirmed your issue at least.
I inserted a little debug code in order to track the plugin behavior.

For some reason, marker.setPosition() does not work in your code for second times or later.

Ok, I got the reason, and temporally solution, but it’s midnight here.
I paste only temporally solution.


export class HomePage {

  map: GoogleMap;
  runner: Marker;
  zombies: Zombie[] = [];

  constructor(public navCtrl: NavController) {}

  ionViewDidLoad() {
    this.loadMap();
    // setup Observable to regularly execute gameloop
    let sub = Observable.interval(1000).subscribe((val) => { this.gameloop(); })
    //sub.unsubscribe();
    // to stop it
  }

  loadMap() {
      let mapOptions: GoogleMapOptions = {
        camera: {
           target: {
             lat: 51.587432,
             lng: -0.319744
           },
           zoom: 18,
           tilt: 30
         }
      };
      this.map = GoogleMaps.create('map_canvas', mapOptions);

      this.runner = this.map.addMarkerSync({
        title: 'you',
        //icon: { url: 'assets/art/runner.png'},
        //animation: 'null',
        position: {
            lat: 51.587432,
            lng: -0.319744
        }
      });
      for (let i = 0; i < 10; i++) {
        this.zombies.push(new Zombie(51.588432-i*0.0001, -0.318744+i*0.0001, this.map));
      }
  }

  gameloop() {
    //for (let i = 0; i < this.zombies.length; i++)
      //this.zombies[i].stagger();
    this.zombies[0].stagger();
  }

  onButtonClick() {
      let position = this.runner.getPosition();
      this.runner.setPosition({
        lat: position.lat + 0.0001,
        lng: position.lng + 0.0001
      });
  }
}

class Zombie {
  position: LatLng;
  marker: Marker;
  //map: GoogleMap;
  lat: number;
  lng: number;

  constructor(lat:number, lng:number, map:GoogleMap) {
    this.lat = lat;
    this.lng = lng;
    //this.map = map;
    this.marker = map.addMarkerSync({
      title: 'zombie!',
      //icon: { url: 'assets/art/zombie.png'},
      animation: 'BOUNCE',
      position: {
        lat: this.lat,
        lng: this.lng
      }
    });
  }

  stagger() {
    this.lat += 0.0001;
    this.lng += 0.0001;
    this.marker.setPosition({
      lat: this.lat,
      lng: this.lng
    });
  }
}

zombiechase

cool, thanks a lot. Now I can carry on making my game :slight_smile: