Menu
I am writing a mobile app in Adobe AIR that loads a google map using Javascript. It works great on the desktop, but on mobile, everything looks WAY too tiny to be user friendly. The street text is unreadable, the infoWindows are too small and text is too small, the icons are too small, the "Satellite" and "Maps" buttons are very tiny, the zoom in and zoom out buttons on the map are too small to manipulate. Is there a "scale" property for the map that I am unable to find in the documentation that I can adjust to make a map more readable and user friendly? Or is this a CSS issue? Here is the Javascript I use to create the map, which I place in a div called "map":
function loadMap(latitude, longitude, mapWidth, mapHeight) {
var myLatlng = new google.maps.LatLng(latitude, longitude);
var sheet = document.getElementById("map");
sheet.style.width = String(mapWidth)+"px";
sheet.style.height = String(mapHeight)+"px";
var mapOptions = {
zoom: 13,
center: myLatlng
}
map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
243
asked Dec 04 '25 11:12
It has been so long ago that I cannot remember the solution that I came up with. I took a quick look at the HTML file I created 10 months ago, and it looks like I created a header in my HTML file and it included some meta tags that included content="initial-scale=1.0". Try that and see if it helps.
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
I figured it out. I needed this at the top:
<meta name="viewport" content="width=device-width">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
