⚡ 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)
DraggabilitySynchronizing positionsDebouncing callbacksEditabilityDetecting when an editable Polyline was modifiedDetecting when an editable Polygon was modifiedDetecting when an editable Circle was modified
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,
});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.”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.
Debouncing callbacks
Circles, polygons, and other shapes all expose their respective
dragend events. However, if the positions are synced like in the example above, the circle's dragend event won’t fire…You can listen to its
center_changed event though:circle.addListener('center_changed', () => { ... });Now, in contrast to the
dragend event, this listener will fire many times over until the dragging is truly finished. In situations like these, it’s customary to debounce the callback to ensure that only one notification is made for an event that fires multiple times: