Ionic - Custom buttons in google maps

Asked

Viewed 88 times

0

I’m using Ionic to create an app where I use the google maps api I need to put some buttons floating on this map, as in the image. Exemplo de botões no mapa

I found a piece of code that seems to have worked for the person, but here with me it doesn’t work, it seems that the button is behind the map. I tried to increase the z-index, but I could not. I also tried to create the buttons inside the div of the #map, but they do not appear.

I’ll leave the code to see how I’m trying to do.

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);}

I appreciate any help.

ionic3 maps floatingactionbutton

1 answer

0


Since Ionic uses html to render the elements on the screen, you can create the buttons and position them with 'position: Fixed' on the map element.

Browser other questions tagged ionic3 maps floatingactionbutton

You are not signed in. Login or sign up in order to post.