3

I have a button which enable/disable draggable option for the map.

And I need to keep the marker in the center of the map while user will drag the map.

var map;

function toggleMapDraggable() {
  if (map.get("draggable")) {
    map.set("draggable", false);
  } else {
    map.set("draggable", true);
  }
}

function initialize() {

  var locations = [
    ['WELWYN GARDEN CITY ', 51.805616, -0.192647, 2],
    ['STANMORE  ', 51.603199, -0.296803, 1]
  ];

  map = new google.maps.Map(document.getElementById('map_canvas'), {
    navigationControl: true,
    scrollwheel: false,
    scaleControl: false,
    draggable: false,
    zoom: 10,
    center: new google.maps.LatLng(51.75339, -0.210114),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var infowindow = new google.maps.InfoWindow();
  var image = 'http://maps.google.com/mapfiles/ms/micons/blue.png';

  var marker, i;


  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map,
      icon: image,
      zIndex: 10
    });

    window.google.maps.event.addListener(map , 'drag', function (event) {
            marker.setPosition( map .getCenter() );
    });

    google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
      }
    })(marker, i));
  }
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input type="button" value="toggle draggable" onclick="toggleMapDraggable();" />
<div id="map_canvas"></div>
webvitaly
  • 4,241
  • 8
  • 30
  • 48
  • possible duplicate of [Fixed marker in center and drag map to get lat,long](http://stackoverflow.com/questions/36722930/fixed-marker-in-center-and-drag-map-to-get-lat-long) – geocodezip Jul 21 '16 at 19:47
  • possible duplicate of [google maps float pin at center and return location](http://stackoverflow.com/questions/27195422/google-maps-float-pin-at-center-and-return-location) – geocodezip Jul 21 '16 at 19:48
  • duplicate of [Fixed marker in center and drag map to get lat,long](http://stackoverflow.com/questions/36722930/fixed-marker-in-center-and-drag-map-to-get-lat-long) – geocodezip Jul 21 '16 at 19:49

3 Answers3

10

For draggable you should use setOptions

map.setOptions({draggable: true});

and for marker in center 

 marker.setPosition( map.getCenter(););
geocodezip
  • 158,664
  • 13
  • 220
  • 245
ScaisEdge
  • 131,976
  • 10
  • 91
  • 107
1

If still actual, now you can use this solution.

Init parameters:

let mapOptions = {
        zoom: 8,
        center: {lat: 50.4501, lng: 30.5234}
    },
    modalMap = new google.maps.Map(document.getElementById('transfers-map'), mapOptions),
    marker = new google.maps.Marker({
        map: modalMap,
        position: modalMap.getCenter(),
        draggable: false,
    });

Solution:

google.maps.event.addListener(modalMap, 'drag', function () {
    marker.setPosition(modalMap.getCenter());
});
NSukonny
  • 1,090
  • 11
  • 18
0

Me funciona mejor el evento "center_changed":

map = new Map(document.getElementById("mapita"), {
    zoom: 4,
    center: {
        lat: @js($lat),
        lng: @js($lng)
    },
    streetViewControl: false,
    mapTypeControl: false,
    mapTypeId: 'roadmap',
    mapId: "DEMO_MAP_ID",
});

marker = new google.maps.Marker({
    map: map,
    position: map.getCenter(),
    draggable: false,
});

map.addListener('center_changed', function () {
    marker.setPosition(map.getCenter());
});
Jovany González
  • 3
  • 2