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

#1

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?

Appropriate Architecture for my app
#2

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);
  }
}

#3

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);
  }
}
#4

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.

#5

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

#6
#7

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

#8

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

#9

No, I mean home.ts is empty.

#10

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

#11

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
#12

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

#13

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…)

#14

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?

#15

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.

#16

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

#17

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