Google map v3 n'est pas complètement affiché dans html5

Google map v3 n'est pas complètement affiché dans html5, phonegap. Entrez la description de l'image ici

Cette carte est glissable, voici le code JavaScript (main.js)

  • Inconvénients dans Multidexing de l'application Android
  • Comment désactiver Widget updatePeriodMillis?
  • Obtenir la largeur et la hauteur des composants en vue Fragment
  • Un moyen peu coûteux / rapide de bitmaps hash?
  • Android capturant la vidéo en ralenti
  • SetOnClickListener et setOnLongClickListener appel sur un problème de bouton unique
  • var map; function initialize() { var myLatlng = new google.maps.LatLng(-25.363882,131.044922); var myLatlng2 = new google.maps.LatLng(-24.363882,131.044922); var myOptions = { center: myLatlng, zoom:5, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); setMarker(myLatlng); setMarker(myLatlng2); } function setMarker(p) { marker = new google.maps.Marker({ position: p, title:"Hello World 2!" }); marker.setMap(map); } initialize(); 

    Et voici mon html

      <!DOCTYPE HTML> <html> <head> <meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="css/jquery.mobile.css" /> <link href="css/styles.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" charset="utf-8" src="js/cordova-1.9.0.js"></script> <script type="text/javascript" charset="utf-8" src="js/jquery-1.6.3.min.js"></script> <script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.1.0.js"></script> <script type="text/javascript" charset="utf-8" src="js/tabs.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="jquery.ui.map/jquery.ui.map.js"></script> <script type="text/javascript" src="jquery.ui.map/jquery.ui.map.services.js"></script> <script type="text/javascript" charset="utf-8" src="js/main.js"></script> </head> <body> <div id="page-id" data-role="page" > <div id="map-container"><div id="map_canvas" style="height:600px; width:600px;"></div> </div> </div> </body> </html> 

    Css

      #map-container { padding: 6px; border-width: 1px; border-style: solid; border-color: #ccc #ccc #999 #ccc; -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px; -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px; box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px; width: 600px; } #map_canvas { width: 600px; height: 400px; } 

    S'il vous plaît me suggérer une solution où est le problème si je l'inspecte dans firebug il charge complètement et affiche une carte complète en div.

  • Android sort de la pile d'activité
  • Comment protéger la clé publique Google Play lors de la facturation InApp
  • Changez la couleur du diviseur dans LinearLayout
  • Pas capable de créer un dossier / fichier dans un système de fichiers Android avec PCLStorage ou Xamarin Forms Labs
  • Accédez à ActionBar à partir d'un Fragment
  • Android snapchat / MSQRD like face stickers
  • 4 Solutions collect form web for “Google map v3 n'est pas complètement affiché dans html5”

    Nous avons eu le même problème et nous l'avons résolu en définissant "max-width: none" sur la carte. Mais je ne me souviens pas pourquoi. 🙁

    En regardant votre capture d'écran, il semble que le mapcontrol occupe l'espace souhaité, mais la zone de carte actuelle n'est pas assez grande. Essayez de déplacer votre appel pour initialiser (); De sorte qu'il s'exécute lorsque le reste de la page est chargé et que vous comprenez si cela vous aide.

     var map; function initialize() { var myLatlng = new google.maps.LatLng(-25.363882,131.044922); var myLatlng2 = new google.maps.LatLng(-24.363882,131.044922); var myOptions = { center: myLatlng, zoom:5, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); setMarker(myLatlng); setMarker(myLatlng2); } function setMarker(p) { marker = new google.maps.Marker({ position: p, title:"Hello World 2!" }); marker.setMap(map); } $(document).ready(function() { initialize(); }); 

    Une autre solution pourrait être d'appeler l'événement de redimensionnement et de faire contrôler le contrôle de carte après que tout a été chargé, c'est-à-dire en appelant google.maps.event.trigger(map, "resize"); (Et l' initialize() appel initialize() dehors de la fonction de pré-fonction comme précédemment).

     $(document).ready(function() { google.maps.event.trigger(map, "resize"); }); 

    Veuillez vérifier les points suivants:

     <div id="mapa" style="width: 350px; height: 350px"></div> 

    Ci-dessus, le div pour la carte doit être répertorié.

     var map = new google.maps.Map( document.getElementById('mapa'), { center: new google.maps.LatLng(9.295680287227711, 76.87921151518822), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }); 

    J'ai essayé tout ce qui précède ne fonctionnera pas, alors j'ai fait un tour comme celui-ci qui donne le résultat souhaité. J'écris une fonction de la souris et j'appelle le code ci-dessous

    (1) Modifier

     <div id="mapa" onmouseover="show_sidebar()" style="width: 350px; height: 350px"></div> 

    (2)

     function show_sidebar(){ google.maps.event.trigger(map, 'resize'); } 

    J'ai eu ce problème dans le passé et posté ma solution à une question similaire .

    Les éléments suivants l'ont réparé:

     google.maps.event.addListenerOnce(map, 'idle', function() { google.maps.event.trigger(map, 'resize'); }); 

    En attendant l'état de repos de la carte (c.-à-d. Il a fini de charger lui-même), puis de lui dire de redimensionner lui-même.

    coAndroid est un fan Android de Google, tout sur les téléphones Android, Android Wear, Android Dev et Android Games Apps.