Enhancing Google Maps in Nuxt 3: Adding Marker Movement and Clustering

Introduction

In the previous article, we explored how to integrate Google Maps into a Nuxt 3 application and display markers on the map. Today, we’ll extend this functionality by adding marker movement and clustering. This will enhance the user experience by allowing markers to be dragged and grouped together when they are in close proximity.

Prerequisites

Before diving into the implementation, ensure you have the following:

• A Nuxt 3 application set up with Google Maps integration.
• Basic knowledge of Vue.js and Nuxt 3.
• Familiarity with the Google Maps JavaScript API.

Adding Marker Movement

To enable marker movement, we need to make the markers draggable and update their positions accordingly. Here’s how you can achieve this:

1. Template Setup: Ensure your GoogleMap component is set up with the necessary props and event listeners.

Get Eugene Moskalenko’s stories in your inbox
Join Medium for free to get updates from this writer.
Remember me for faster sign in
<template>
  <GoogleMap
    ref="mapRef"
    :api-key="GMAPS_API_KEY"
    :options="mapOptions"
    :center="center"
    style="width: 100%; height: 100vh;"
    :zoom="15"
    @click="onMapClick"
  >
    <MarkerCluster>
      <Marker
        v-for="(marker, index) in markers"
        ref="markerRef"
        :key="marker.index"
        :options="marker"
        @dblclick="handlerMarker(index)"
        @dragend="handleMarkerDrag(index)"
      />
    </MarkerCluster>
  </GoogleMap>
</template>

2. Watch for Map Readiness: Add a watcher to ensure the map is ready before adding event listeners.

watch(
  () => mapRef.value?.ready,
  (ready) => {
    if (!ready) {
      return;
    }
    const gmap = mapRef.value.map;
    gmap.addListener('bounds_changed', handleBoundsChanged);
  },
);

3. Handler Functions: Implement the handler functions to manage marker interactions.

function handlerMarker(index) {
  nextTick(() => {
    markers.value[index].draggable = !markers.value[index].draggable;
    markerRef.value[index].marker.draggable = !markerRef.value[index].marker.draggable;
    markers.value[index].index = Date.now();
  });
}

function handleMarkerDrag(index) {
  const { lat, lng } = markerRef.value[index].marker.position;
  updateMarker(index, lat(), lng());
  markers.value[index].index = Date.now();
}

function updateMarker(index, lat, lng) {
  markers.value[index].position = { lat, lng };
  markerRef.value[index].marker.position = { lat, lng };
  markers.value[index].index = Date.now();
}

Adding Marker Clustering

Marker clustering is a useful feature when dealing with a large number of markers. It groups nearby markers into clusters, making the map easier to navigate.

1. Integrate MarkerCluster: Wrap your markers with the MarkerCluster component to enable clustering.

<template>
  <GoogleMap
    ref="mapRef"
    :api-key="GMAPS_API_KEY"
    :options="mapOptions"
    :center="center"
    style="width: 100%; height: 100vh;"
    :zoom="15"
    @click="onMapClick"
  >
    <MarkerCluster>
      <Marker
        v-for="(marker, index) in markers"
        ref="markerRef"
        :key="marker.index"
        :options="marker"
        @dblclick="handlerMarker(index)"
        @dragend="handleMarkerDrag(index)"
      />
    </MarkerCluster>
  </GoogleMap>
</template>

Conclusion

By following these steps, you can add marker movement and clustering to your Google Map in a Nuxt 3 application. This enhances the interactivity and usability of your map, providing a better user experience. For a detailed guide on integrating Google Maps and displaying markers, refer to the previous article here. Additionally, you can explore the complete implementation on GitHub.