⚡ GMapsBook.com is crafted by Jozef Sorocin (🟢 Book a consulting hour) and powered by:

g-Xperts (Google Cloud & Business Profile Partner)
Spatialized.io (Elasticsearch & Google Maps consulting).
and Garages-Near-Me.com (Effortless parking across Germany)

Once you have customized your map, markers, shapes, and info windows, you can let your users to interact with them.

Draggability

Any artifact can be made moveable (or draggable) using the draggable: true property. This property can also be toggled on-demand via .setDraggable(true) or .setOptions({ draggable: true }).

Once the user stops dragging the marker, the dragend event is fired:

const marker = new google.maps.Marker({
	...,
	draggable: true,
});

marker.addListener('dragend', () => {
  console.info('New position: ', marker.getPosition().toJSON());
});

If the marker is connected with an InfoWindow, the info window will be dragged along with it:

const infowindow = new google.maps.InfoWindow({ ... });
marker.addListener('click', () => {
  infowindow.open({ map, anchor: marker });
});

Synchronizing positions

If you have a Circle drawn “around” a marker:

const circle = new google.maps.Circle({
  map,
  center: position,
  radius: 500,
  draggable: true,
});

you can sync their positions using the .bindTo utility:

circle.bindTo('center', marker, 'position');

This statement follows the bindTo(key, target, targetKey?) ****syntax so it can be understood as “bind the circle’s center to the marker's position.”

<aside> 💡 The neat thing about this is that it works both ways — when you drag the marker, the circle moves along with it and if you drag the circle, the marker repositions as well.

</aside>

https://tally.so/r/w2a2jM