Javascript Google Maps v3 marker becomes invisible when dragging is enabled

Question

I'm using the Javascript Google Maps API v3 to make a map that builds a polygon point by point where the map is clicked. In addition, I want to make the markers that I position where the user clicked to be draggable to enable them to edit the shape of the polygon.

I followed this example: http://gmaps-samples-v3.googlecode.com/svn/trunk/poly/poly_edit.html which is exactly what I want I want it to do.

My issue is that when I make the marker draggable it becomes invisible on the map. I replicated the error in a jsbin, just uncomment the line that says marker.setDraggable(true) to see the error. http://jsbin.com/pekuyavi/9/edit?js,output

Does anyone know how to fix this?

Answer 1

It seems that root cause of this problem is definition of map. You used:

    position: latLng,

instead of

    center: latLng,

Why this delete the marker when marker.setDraggable() is called I cannot figure out. Marker is deleted even if marker click event handler is commented out!

Update: even just commenting out position: latLng, from map options will work because map center is set later using map.panTo(latLng);.

Answer 2

u can set property like this to the marker

 var marker = new google.maps.Marker({
      position: e.latLng,
      map: map,
      draggable: false,
      title:'anytext'
  });

and u can remove the below metioned code bcoz that removes the marker from ur layer

  google.maps.event.addListener(marker, 'click', function () {
      marker.setMap(null);
      for (var i=0, I = markers.length; i < I && markers[i] != marker; i++);
      markers.splice(i, 1);
      path.removeAt(i);
    });

Answer 3

try this one

$(document).ready(function (){
//   Initialize map
  var latLng = new google.maps.LatLng(-37.8142026, 144.963785);  
  var mapOptions = {
    zoom: 10,
    panControl: true,
    zoomControl: true,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.DEFAULT,
      position: google.maps.ControlPosition.TOP_LEFT
    },
    center: latLng,
    scaleControl: false,
    mapTypeControl: false,
    streetViewControl: false
  };

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




//   set up polygon creation
  var markers = [],
      path = new google.maps.MVCArray,
      poly = new google.maps.Polygon({
        strokeWeight: 3,
        fillColor: '#555FF'
      });

  poly.setMap(map);
  poly.setPaths(new google.maps.MVCArray([path]));

  google.maps.event.addListener(map, 'click', function (evt) {


    var maker = new google.maps.Marker({
      position: evt.latLng,
      map: map,
      draggable: true

    });

    markers.push(maker);

//     Add marker dragend listener to move the path to the marker
    google.maps.event.addListener(maker, 'dragend', function () {
      for (var i=0, I = markers.length; i < I && markers[i] != maker; i++);
      path.setAt(i, maker.getPosition());
    });
    path.insertAt(path.length, evt.latLng);
  });



});