Skip to main content
3 de 3
se añadió 1 carácter en el cuerpo
Pikoh
  • 17.5k
  • 9
  • 41
  • 56

Ya logré solucionarlo, lo hice con los siguientes pasos:

  1. Agregar ref="mapRef" a la etiqueta gmap-map. Con esto mas adelante podré tener acceso al objeto "map". La etiqueta debe quedar así:

    <gmap-map ref="mapRef"
    :center="center"
    :zoom="12"
    :options="mapOptions" // Para ocultar el control "mapTypeControl"
     style="width:100%;  height: 400px;"
    >
    </gmap-map>
    
  2. Mi control queda del siguiente modo:

     <div class="hide">
       <div class="input-group col-md-6" id="myAutocomplete">
       <div class="input-group-prepend">
           <span class="input-group-text bg-primary" id="basic-text1">
                <i class="fa fa-search text-white" aria-hidden="true"></i>
           </span>
       </div>
       <gmap-autocomplete
           class="form-control my-0 py-1"
           @place_changed="setPlace">
       </gmap-autocomplete>
       </div>
    </div>
    

    El div "padre" con la clase "hide" es importante, sino el input se mostrará en la pagina antes de terminar de cargar el mapa y luego lo moverá a su interior. Con esto, cuando esta listo el mapa lo muestra en su interior directamente. El resto ya son estilos...

  3. Voy a agregar una configuración extra para ocultar mapTypeControl .Esto NO es obligatorio.

      data() {
                return {
                    // default to Montreal to keep it simple
                    // change this to whatever makes sense
                    center: { lat: 45.508, lng: -73.587 },
                    markers: [],
                    places: [],
                    currentPlace: null,
                    mapOptions: {
                        mapTypeControl: false
                    }
                };
            },
    
  4. Una vez que el componente esta montado, es decir en el evento "mounted()" voy a usar el objeto "map" para agregar mi componente. El código debe quedar así:

    mounted() {
            this.$refs.mapRef.$mapPromise.then((map) => {
                var myControl = document.getElementById('myAutocomplete');
    
                myControl.index = 1; // Esto es importante sino arroja error.
    
                map.controls[google.maps.ControlPosition.TOP_CENTER].push(myControl);
            })
        },
    

Una vez hecho todo esto, obtengo el siguiente resultado:

Resultado

Espero que le sirva a alguien. Saludos!

Fran Islas
  • 2.4k
  • 1
  • 9
  • 21