javascript - Google maps api v3 Two markers one fixed one dragged

Question

I'm using two markers for getting distances A and B

The Javascript:

var rendererOptions = {
    draggable: true
  };
    var Mapa = {
  // HTML Nodes
  mapContainer: document.getElementById('mapa'),
  dirContainer: document.getElementById('trasa'),
  fromInput: document.getElementById('from-input'),
  toInput: document.getElementById('to-input'),
  travelModeInput: document.getElementById('travel-mode-input'),
  unitInput: document.getElementById('unit-input'),

  // API Objects

  dirService: new google.maps.DirectionsService(rendererOptions),
  dirRenderer: new google.maps.DirectionsRenderer(rendererOptions),
  map: null,

  showDirections: function(dirResult, dirStatus) {
    if (dirStatus != google.maps.DirectionsStatus.OK) {
      alert('N?o há resultados!');
      return;
    }

    // Show directions
    Mapa.dirRenderer.setMap(Mapa.map);
    Mapa.dirRenderer.setPanel(Mapa.dirContainer);
    Mapa.dirRenderer.setDirections(dirResult);
  },

  getSelectedTravelMode: function() {
    var value = Mapa.travelModeInput.options[Mapa.travelModeInput.selectedIndex].value
    if (value == 'driving') {
      value = google.maps.DirectionsTravelMode.DRIVING;
    } else {
      alert('Unsupported travel mode.');
    }
    return value;
  },

  getDirections: function() {
    var fromStr = Mapa.fromInput.value;
    var toStr = Mapa.toInput.value;
    var dirRequest = {
      origin: fromStr,
      destination: toStr,
      travelMode: Mapa.getSelectedTravelMode(),
      provideRouteAlternatives: true,

    };
    Mapa.dirService.route(dirRequest, Mapa.showDirections);
  },

  init: function() {
    var latLng = new google.maps.LatLng(38.6978, -27.1624);
    Mapa.map = new google.maps.Map(Mapa.mapContainer, {
      zoom: 15,
      center: latLng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    // Show directions onload
    Mapa.getDirections();
  }
}


// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', Mapa.init);

I just want the second marker, (B) be fixed, don't be dragable.

Any ideias?

Is based on this: http://webhost.home.pl/piotr/google_maps_test/index.html

Answer 1

One option would be to render the directions yourself, making one of the markers draggable, the other not. Disadvantage is you don't get the ability to drag the route to change it (unless you implement that yourself as well; you can probably find examples of that from before the release of native draggable direction in the API).

working example (the start location is green)

Another option: use draggable directions, but suppress the markers. Use markers like the above example:

var directionsDisplay = new google.maps.DirectionsRenderer({
      draggable:true, 
      suppressMarkers: true
    });

working example with draggable directions