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

**URL:** <https://forum.ionicframework.com/t/google-maps-native-plugin-markers-not-appearing-to-update-after-setlocation/136984>\
**Category:** Ionic Native\
**Created:** [August 1, 2018, 12:00pm UTC](https://forum.ionicframework.com/t/google-maps-native-plugin-markers-not-appearing-to-update-after-setlocation/136984 "2018-08-01T12:00:20Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![ezekielincorrigible](https://avatars.discourse-cdn.com/v4/letter/e/22d042/32.png) [@ezekielincorrigible](https://forum.ionicframework.com/u/ezekielincorrigible)\
**Post date:** [August 1, 2018, 12:00pm UTC](https://forum.ionicframework.com/t/google-maps-native-plugin-markers-not-appearing-to-update-after-setlocation/136984/1 "2018-08-01T12:00:20Z")

</div>

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

```auto
  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?

---

<div class="post-metadata">

**Author:** ![ezekielincorrigible](https://avatars.discourse-cdn.com/v4/letter/e/22d042/32.png) [@ezekielincorrigible](https://forum.ionicframework.com/u/ezekielincorrigible)\
**Post date:** [August 1, 2018, 10:27pm UTC](https://forum.ionicframework.com/t/google-maps-native-plugin-markers-not-appearing-to-update-after-setlocation/136984/2 "2018-08-01T22:27:45Z")

</div>

Continuing the discussion from [Google Maps Native plugin - markers not appearing to update after setLocation()](https://forum.ionicframework.com/t/google-maps-native-plugin-markers-not-appearing-to-update-after-setlocation/136984):

Here is the entire code, if that helps!

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

```

---

<div class="post-metadata">

**Author:** ![wf9a5m75](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/wf9a5m75/32/118692_2.png) [@wf9a5m75](https://forum.ionicframework.com/u/wf9a5m75)\
**Post date:** [August 1, 2018, 10:33pm UTC](https://forum.ionicframework.com/t/google-maps-native-plugin-markers-not-appearing-to-update-after-setlocation/136984/3 "2018-08-01T22:33:00Z")

</div>

How about this?

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

```

---

<div class="post-metadata">

**Author:** ![ezekielincorrigible](https://avatars.discourse-cdn.com/v4/letter/e/22d042/32.png) [@ezekielincorrigible](https://forum.ionicframework.com/u/ezekielincorrigible)\
**Post date:** [August 1, 2018, 10:36pm UTC](https://forum.ionicframework.com/t/google-maps-native-plugin-markers-not-appearing-to-update-after-setlocation/136984/4 "2018-08-01T22:36:08Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![wf9a5m75](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/wf9a5m75/32/118692_2.png) [@wf9a5m75](https://forum.ionicframework.com/u/wf9a5m75)\
**Post date:** [August 1, 2018, 10:38pm UTC](https://forum.ionicframework.com/t/google-maps-native-plugin-markers-not-appearing-to-update-after-setlocation/136984/5 "2018-08-01T22:38:01Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ezekielincorrigible](https://avatars.discourse-cdn.com/v4/letter/e/22d042/32.png) [@ezekielincorrigible](https://forum.ionicframework.com/u/ezekielincorrigible)\
**Post date:** [August 1, 2018, 10:42pm UTC](https://forum.ionicframework.com/t/google-maps-native-plugin-markers-not-appearing-to-update-after-setlocation/136984/6 "2018-08-01T22:42:51Z")

</div>

> **[ezekielincorrigible/zombiechase](https://github.com/ezekielincorrigible/zombiechase)**
>
> Contribute to zombiechase development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![wf9a5m75](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/wf9a5m75/32/118692_2.png) [@wf9a5m75](https://forum.ionicframework.com/u/wf9a5m75)\
**Post date:** [August 1, 2018, 10:46pm UTC](https://forum.ionicframework.com/t/google-maps-native-plugin-markers-not-appearing-to-update-after-setlocation/136984/7 "2018-08-01T22:46:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ezekielincorrigible](https://avatars.discourse-cdn.com/v4/letter/e/22d042/32.png) [@ezekielincorrigible](https://forum.ionicframework.com/u/ezekielincorrigible)\
**Post date:** [August 1, 2018, 10:48pm UTC](https://forum.ionicframework.com/t/google-maps-native-plugin-markers-not-appearing-to-update-after-setlocation/136984/8 "2018-08-01T22:48:46Z")

</div>

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](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

---

<div class="post-metadata">

**Author:** ![wf9a5m75](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/wf9a5m75/32/118692_2.png) [@wf9a5m75](https://forum.ionicframework.com/u/wf9a5m75)\
**Post date:** [August 1, 2018, 10:50pm UTC](https://forum.ionicframework.com/t/google-maps-native-plugin-markers-not-appearing-to-update-after-setlocation/136984/9 "2018-08-01T22:50:26Z")

</div>

No, I mean `home.ts` is empty.

> <https://github.com/ezekielincorrigible/zombiechase/blob/master/src/pages/home/home.ts>

---

<div class="post-metadata">

**Author:** ![wf9a5m75](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/wf9a5m75/32/118692_2.png) [@wf9a5m75](https://forum.ionicframework.com/u/wf9a5m75)\
**Post date:** [August 1, 2018, 10:51pm UTC](https://forum.ionicframework.com/t/google-maps-native-plugin-markers-not-appearing-to-update-after-setlocation/136984/10 "2018-08-01T22:51:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ezekielincorrigible](https://avatars.discourse-cdn.com/v4/letter/e/22d042/32.png) [@ezekielincorrigible](https://forum.ionicframework.com/u/ezekielincorrigible)\
**Post date:** [August 1, 2018, 11:49pm UTC](https://forum.ionicframework.com/t/google-maps-native-plugin-markers-not-appearing-to-update-after-setlocation/136984/11 "2018-08-01T23:49:06Z")

</div>

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!

```auto
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

```

---

<div class="post-metadata">

**Author:** ![wf9a5m75](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/wf9a5m75/32/118692_2.png) [@wf9a5m75](https://forum.ionicframework.com/u/wf9a5m75)\
**Post date:** [August 1, 2018, 11:59pm UTC](https://forum.ionicframework.com/t/google-maps-native-plugin-markers-not-appearing-to-update-after-setlocation/136984/12 "2018-08-01T23:59:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ezekielincorrigible](https://avatars.discourse-cdn.com/v4/letter/e/22d042/32.png) [@ezekielincorrigible](https://forum.ionicframework.com/u/ezekielincorrigible)\
**Post date:** [August 2, 2018, 9:23am UTC](https://forum.ionicframework.com/t/google-maps-native-plugin-markers-not-appearing-to-update-after-setlocation/136984/13 "2018-08-02T09:23:38Z")

</div>

Ok got it all up on github now [https://github.com/ezekielincorrigible/zombiechase](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…)

---

<div class="post-metadata">

**Author:** ![ezekielincorrigible](https://avatars.discourse-cdn.com/v4/letter/e/22d042/32.png) [@ezekielincorrigible](https://forum.ionicframework.com/u/ezekielincorrigible)\
**Post date:** [August 2, 2018, 11:00pm UTC](https://forum.ionicframework.com/t/google-maps-native-plugin-markers-not-appearing-to-update-after-setlocation/136984/14 "2018-08-02T23:00:55Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![wf9a5m75](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/wf9a5m75/32/118692_2.png) [@wf9a5m75](https://forum.ionicframework.com/u/wf9a5m75)\
**Post date:** [August 3, 2018, 7:38am UTC](https://forum.ionicframework.com/t/google-maps-native-plugin-markers-not-appearing-to-update-after-setlocation/136984/15 "2018-08-03T07:38:22Z")

</div>

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.

 ![17](https://global.discourse-cdn.com/ionicframework/original/3X/6/7/674bd39f9d797dcd57916251822b6d5c1274b160.png)

---

<div class="post-metadata">

**Author:** ![wf9a5m75](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/wf9a5m75/32/118692_2.png) [@wf9a5m75](https://forum.ionicframework.com/u/wf9a5m75)\
**Post date:** [August 3, 2018, 7:51am UTC](https://forum.ionicframework.com/t/google-maps-native-plugin-markers-not-appearing-to-update-after-setlocation/136984/16 "2018-08-03T07:51:55Z")

</div>

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

```auto

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](https://global.discourse-cdn.com/ionicframework/original/3X/b/0/b0fffa76e8518b74cffc68e1647ddfebe8451908.gif)

---

<div class="post-metadata">

**Author:** ![ezekielincorrigible](https://avatars.discourse-cdn.com/v4/letter/e/22d042/32.png) [@ezekielincorrigible](https://forum.ionicframework.com/u/ezekielincorrigible)\
**Post date:** [August 3, 2018, 5:11pm UTC](https://forum.ionicframework.com/t/google-maps-native-plugin-markers-not-appearing-to-update-after-setlocation/136984/17 "2018-08-03T17:11:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:26pm UTC](https://forum.ionicframework.com/t/google-maps-native-plugin-markers-not-appearing-to-update-after-setlocation/136984/18 "2021-07-19T21:26:25Z")

</div>