How to change the marker position in google javascript maps api v3?

Question

I have this map:

.... class Maps .... 

Maps.prototype.initialize = function (x, y) {
    var latitude = x;
    var longitude = y;

    var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(latitude, longitude),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById('map_canvas'),  mapOptions);

    var marker = new google.maps.Marker({
        position: map.getCenter(),
        map: map,
        title: 'Click to zoom'
    });
};

Maps.prototype.changePosition = function (x, y) {

    var latitude = x;
    var longitude = y;

    var map = new google.maps.LatLng(latitude, longitude);
    marker.setPosition(map);
}

....

then:

var maps = new Maps();
var marker = maps.initialize(x, y);

window.setTimeout(function() {
    maps.changePosition(x, y));
}, 3000);

the initialize method works, and renders the map and the marker

but the second one doesn't work, doesn't know what setPosition is

any ideas on this issue?

Answer 1

There are different issues.

the first one, which will prevent the code from executing: your iinitialize-function doesn't have a return-value, so your maps -variable is undefined and didn't have a method changePosition .

Later: the changePosition has to arguments , z and y , but inside the function you access the variables x and y

However, I don't see any code that modifies x and y , so even when the code would work it doesn't have any visible effect.

---

function Maps(){}

Maps.prototype.initialize = function (x, y, z, o) {

    this.center    = new google.maps.LatLng(x, y)
    this.zoom      = z;
    this.node      = document.getElementById(o);
    this.markers   = [];

    var mapOptions = {
        zoom:       this.zoom,
        center:     this.center,
        mapTypeId:  google.maps.MapTypeId.ROADMAP
    };

    this.map = new google.maps.Map(this.node,  mapOptions);

    return this;
};

Maps.prototype.addMarker=function(x, y, t , c){

  var marker = new google.maps.Marker({
        position: new google.maps.LatLng(x,y),
        map: this.map,
        title: t||'Click to zoom'
    });

  this.markers.push(marker);
  if(c)this.map.setCenter(marker.getPosition());
  return marker;
}

Maps.prototype.changePosition = function (m , x, y, c, f) {

    var latLng = new google.maps.LatLng(x, y);
    m.setPosition(latLng);
    if(c)this.map.setCenter(latLng);
    if(f)f();
}

//create the Maps-instance
var maps = new Maps(),
    x = 10,
    y = 10;

//do something onload
google.maps.event.addDomListener(window,'load',function(){
  //initialize maps
  maps.initialize(x, y , 3, 'map_canvas');

  //add a marker
  var marker=maps.addMarker(x, y ,'hello marker', true);

  //change position of marker
  window.setTimeout(function() {
    maps.changePosition(marker, x+50, y+50 ,true,
                        function(){alert('position changed');});
}, 5000);
});