0

Estou usando ionic para criar um app onde uso a api do google maps eu preciso colocar alguns botões flutuando sobre esse mapa, como na imagem. Exemplo de botões no mapa

Eu achei um pedaço de código que parece ter funcionado pra pessoa, mas aqui comigo não funciona, parece que o botão fica atrás do mapa. Tentei aumentar o z-index, mas não consegui. Tentei também criar os botões dentro da div do #map, mas não aparecem.

Vou deixar o código para verem como estou tentando fazer.

initMap(lat, lng) {
this.map = new google.maps.Map(this.mapElement.nativeElement, {
  zoom: 16,
  center: { lat: lat, lng: lng },
  mapTypeControl: true,
  streetViewControl: true,
  fullscreenControl: false,
  zoomControlOptions: {
    position: google.maps.ControlPosition.LEFT_BOTTOM
  }
})

//### Add a button on Google Maps ...
var controlMarkerUI = document.createElement('DIV');
controlMarkerUI.style.cursor = 'pointer';
controlMarkerUI.style.backgroundImage = "url(http://localhost/car.png)";
controlMarkerUI.style.height = '28px';
controlMarkerUI.style.width = '25px';
controlMarkerUI.style.top = '11px';
controlMarkerUI.style.left = '120px';
controlMarkerUI.title = 'Click to set the map to Home';
//myLocationControlDiv.appendChild(controlUI);

this.map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(controlMarkerUI);}

Agradeço qualquer ajuda.

1 Resposta 1

0

Como o Ionic utiliza html para renderização dos elementos na tela, você pode criar os botões e posicioná-los com 'position: fixed' sobre o elemento do mapa.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .