Google Maps JavaScript looks too small on a high DPI phone. How to scale it?

Question

The Ionic Native Google Maps was kind of too problematic, so I was trying to switch to the JavaScript version. I simply followed this page (https://www.joshmorony.com/ionic-2-how-to-use-google-maps-geolocation-video-tutorial/).

Now Google Map is loaded and working, but the problem is that the [+][-] and the Street View buttons are tiny. It seems that I could disable all in-built buttons and probably create my own buttons on the map, but that would take time. Is there any way just to enlarge the in-built buttons? For example, 200%?

PS

Not only the buttons the entire map, like the text, markers, etc, is too small. It may be my phone has a QHD screen (very high DPI). It may needs something like that "scale 150%" like Windows DPI settings. Is there a way to achieve that?

Answer 1

Maybe my solution will be useful:

I used @media rules for different DPIs. Here is tutorial https://css-tricks.com/snippets/css/retina-display-media-query/

.map {
    width: 100%;
    height: 100%;
}
@media (min-resolution: 180dpi){ // dpr2.0 and more
    .map {
        width: 50%;
        height: 50%;
        transform: scale(2);
        transform-origin: left top;
    }
}