Reference of map instance

[34fame]

I want to use google.maps.DirectionsRenderer() to render routes on the map. How can I render the map instance from the GMapMap component?

Example code from Google Maps developer site:

function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsRenderer.setMap(map);
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
    origin: start,
    destination: end,
    travelMode: 'DRIVING'
  };
  directionsService.route(request, function(result, status) {
    if (status == 'OK') {
      directionsRenderer.setDirections(result);
    }
  });
}

I'm using Vue 3. Here is just enough of a component to show what I am currently trying.

<template>
  <GMapMap ref="map" ... />
</template>

<script>
  setup() {
    const map = ref(null)

    onMounted(() => console.log(map.value))

    return { map }
  }
</script>

The value is null.

[34fame]

Finally figured it out. Even though map.value was not null, the $mapObject value wasn't there immediately. Had to move to a watch and use setInterval()...

      watch(
         () => map.value,
         async (val) => {
            const mapValue = val
            const interval = setInterval(async () => {
               if (val.$mapObject) {
                  clearInterval(interval)
                  await setRoutes()
               }
            }, 500)
         }
      )

[fawmi]

Hi @34fame
To access google.maps and other objects from google follow this example:
https://vue-map.netlify.app/examples/how-to-access-google-maps-object.html

You solution with timeout may work in your case, but will fail depending on internet speed or your users.

[34fame]

Awaiting $mapPromise was definitely something I missed. Thanks!!