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.
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.