CODEWITHSUNDEEP
javascriptjquerygoogle-maps-api-3
dylanjha
dylanjha

Reputation: 2523

Update the google maps marker without rebuilding the map

I'm using the google maps api like this:

this.init_map = function(lat, lng){
var mapOptions = {
  center: new google.maps.LatLng(lat, lng),
  zoom: 17,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(lat, lng),
  map: map,
  title:"I'm Here!"
});
}

This takes lat and lng, and draws the map just fine, but when new lat & lng variables get pushed into this function over a websocket the page doesn't reload, but the map gets re drawn with the marker in the new lat & lng position.

I want to update the marker on the map without redrawing the map.

Upvotes: 0

Views: 6305

Answers (1)

apneadiving
apneadiving

Reputation: 115541

var map = null;
var markers = [];

this.init_map = function(){
var mapOptions = {
  center: new google.maps.LatLng(lat, lng),
 zoom: 17,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}

this.addMarker = function(lat, lng, id){
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lng),
    map: map,
    title:"I'm Here!"
  });
  markers.push({ id: id, markerObject: marker});
}

this.updateMarkerCoordinates(lat, lng, id){
  //I let you loop the markers array, compare ids and retrieve the marker
    marker.setPosition(new google.maps.LatLng(lat, lng));
}

Upvotes: 5

Related Questions