API Google Maps - texte et contrôles trop petits à utiliser sur mobile

Je suis en train d'écrire une application mobile dans Adobe AIR qui charge une carte google en utilisant Javascript. Cela fonctionne très bien sur le bureau, mais sur mobile, tout semble trop petit pour être convivial. Le texte de la rue est illisible, les fenêtres info sont trop petites et le texte est trop petit, les icônes sont trop petites, les boutons "Satellite" et "Maps" sont très petits, les boutons zoom avant et arrière de la carte sont trop petits manipuler. Y a-t-il une propriété «échelle» pour la carte que je ne trouve pas dans la documentation que je peux ajuster pour rendre la carte plus lisible et plus conviviale? Ou est-ce un problème de CSS? Voici le Javascript que j'utilise pour créer la carte, que je place dans un div appelé « carte »:API Google Maps - texte et contrôles trop petits à utiliser sur mobile

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

Source

2016-11-28 sax

Voir la même chose de mon côté. avez-vous déjà compris? – gnarbarian

J'ai posé cette question il y a 10 mois alors rappelez-vous très peu de la solution que j'ai trouvée, mais jetez un oeil au code que j'ai posté ci-dessous et faites-moi savoir si cela aide. Sinon, je peux creuser un peu plus profond pour toi. – sax

Merci! Je l'ai compris. J'avais besoin de: – gnarbarian

Il a été si longtemps que je ne me souviens pas la solution que je suis venu avec. J'ai jeté un coup d'oeil au fichier HTML que j'ai créé il y a 10 mois, et il semble que j'ai créé un en-tête dans mon fichier HTML et qu'il incluait quelques balises META qui incluaient content = "initial-scale = 1.0". Essaie ça et vois si ça aide.

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

Source

2017-10-19 21:52:20 sax

Je l'ai compris. J'avais besoin de cela en haut:

<meta name="viewport" content="width=device-width">

Source

2017-10-19 21:55:27 gnarbarian

API Google Maps - texte et contrôles trop petits à utiliser sur mobile

Répondre

Questions connexes