Redimensionner la fenêtre infoWindow Google Maps API v3

La taille par défaut d'infoWindow est trop grande pour moi. Je veux que ce soit beaucoup plus petit que je ne peux pas comprendre comment le faire. J'ai essayé de placer un paramètre maxWidth sur mon constructeur infoWindow comme celui-ciRedimensionner la fenêtre infoWindow Google Maps API v3

var infowindow = new google.maps.InfoWindow({'maxWidth':'10px'});

et réglage de la largeur CSS comme celui-ci

<style type="text/css"> 
#infoWindow { 
    width: 10px; 
} 
</style>

mais qui ne semble changer la taille de l'emballage de texte, pas boîte actuelle. Comment puis-je changer la taille de la boîte infoWindow?

Voici mon code.

<!doctype html> 
<html lang="en"> 
<head> 
    <title>jQuery mobile with Google maps - Google maps jQuery plugin</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
    <style type="text/css"> 
    #infoWindow { 
     width: 10px; 
    } 
    </style> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script> 
    <script type="text/javascript"> 

    var cityList = [ 
    ['Chicago', 41.850033, -87.6500523, 1], 
    ['Illinois', 40.797177,-89.406738, 2] 
    ]; 

    var demoCenter = new google.maps.LatLng(41,-87); 

    var map; 
    function initialize() 
    { 
     map = new google.maps.Map(document.getElementById('map_canvas'), { 
      zoom: 7, 
      center: demoCenter, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 
     addMarkers(); 
    } 

    function addMarkers() 
    { 
     var marker, i; 
     var infowindow = new google.maps.InfoWindow({'maxWidth':'10px'}); 
     for (i = 0; i < cityList.length; i++) 
     { 
      marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(cityList[i][1], cityList[i][2]), 
       map: map, 
       title: cityList[i][0] 
      }); 

      google.maps.event.addListener(marker, 'click', (function(marker, i) { 
       var contentString = '<div id="infoWindow">' 
        +'<div id="bodyContent">' 
        +'<p>' 
        + "This location is:<br>" 
        + marker.title 
        +'</p>' 
        +'</div>' 
        + '</div>'; 
       return function() { 
        infowindow.setContent(contentString); 
        infowindow.open(map, marker); 
       } 
       })(marker, i)); 
      } 
     } 

</script> 
    </head> 
    <body onload="initialize()"> 
     <div id="basic-map" data-role="page"> 
      <div data-role="header"> 
       <h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1> 
       <a data-rel="back">Back</a> 
      </div> 
      <div data-role="content"> 
       <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;"> 
        <div id="map_canvas" style="height:350px;"></div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

Source

2012-08-24 erin

Également un problème possible: la valeur de 'maxWidth' est supposée être un nombre (https://developers.google.com/maps/documentation/javascript/reference#InfoWindowOptions) , mais '' 10px'' est une chaîne. – jacob

L'infoWindow natif a une taille minimale. S'il est grand pour vous, vous devez regarder à l'aide d'une solution de rechange comme infoBubble ou InfoBox

Source

2012-08-24 05:59:26 geocodezip

Quelle est la taille minimale de infoWindow natif? – Alexandre

ressemble à ~ 200px - [comment faire pour rétrécir infoWindow] (https://groups.google.com/group/google-maps-js-api-v3/browse_frm/thread/c5ba914f3c3eb02/f939f81d732086df) - [comment changer le taille de l'infowindow] (https://groups.google.com/group/google-maps-js-api-v3/browse_frm/thread/e77b0f16e53ae38/2bc1311b01314e80) – geocodezip

votre section CSS ne fait rien parce que var infoWindow n'est pas la même chose que <div id="infoWindow">
Le documentation dit:

maxWidth: o largeur maximale f l'infowindow, quelle que soit la largeur du contenu. Cette valeur n'est prise en compte que si elle est définie avant un appel à ouvert. Pour modifier la largeur maximale lors de la modification du contenu, appelez close, setOptions, puis ouvrez-le.

Également ce que Larry, (géocodezip), a déclaré. (il tape plus vite que moi) ;-)

Source

2012-08-24 06:05:07 Marcelo

Redimensionner la fenêtre infoWindow Google Maps API v3

Répondre

Questions connexes