Google Maps V3: las ventanas de información no cambiar el tamaño a la información en forma

Question

Problema:

Tengo un mapa API V3, con una ventana de contenido para cada marcador. El contenido de los tramos de ventana de información a través de múltiples líneas, pero la ventana de información no cambia de tamaño para adaptarse a todo, haciendo que aparezca un iframe como desplazamiento.

I han analizado el método setContent () en el API que de acuerdo con algunos de los puestos en la lista de correo V3 API debe corregir el problema. Sin embargo, parece que he estado poniendo en el lugar equivocado causando así el mapa no carga.

contenido InfoWindow se rellena de un campo en el locations_array.

código de mapa

Este es el código que estoy usando, menos el método setContent ().

<script src="/_global/assets/scripts/jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script language="javascript">
$(document).ready(function() {
    //Google Maps
    var myOptions = {
        zoom: 5,
        center: new google.maps.LatLng(-26.66, 122.25),
        mapTypeControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU },
        navigationControl: true,
        navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL }
    }

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    // Create an array to hold a series of generic objects
    // Each one will represent an individual marker, and contain all the
    // information we need for that marker. This way, we can reuse the data
    // on the client-side in other scripts as well.

    var locations_array = [
    {latitude: -35.015672, longitude: 117.879639, title: "Albany", infoWindowContent: "<strong>Albany</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcAlbany\">Get office details</a>"},
    {latitude: -33.351479, longitude: 115.666658, title: "Bunbury", infoWindowContent: "<strong>Bunbury</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcBunbury\">Get office details</a>"},
    {latitude: -24.850919, longitude: 113.731984, title: "Carnarvon", infoWindowContent: "<strong>Carnarvon</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcCarnarvon\">Get office details</a>"},
    {latitude: -33.361363, longitude: 116.161534, title: "Collie", infoWindowContent: "<strong>Collie</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcCollie\">Get office details</a>"},
    {latitude: -33.847418, longitude: 121.884107, title: "Esperance", infoWindowContent: "<strong>Esperance</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcEsperance\">Get office details</a>"},
    {latitude: -31.795396, longitude: 115.88941, title: "Gnangara", infoWindowContent: "<strong>Gnangara</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcGnangara\">Get office details</a>"},
    {latitude: -33.082093, longitude: 115.913902, title: "Harvey", infoWindowContent: "<strong>Harvey</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcHarvey\">Get office details</a>"},
    {latitude: -33.082093, longitude: 115.913902, title: "Harvey Mill", infoWindowContent: "<strong>Harvey Mill</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcHarveyMill\">Get office details</a>"},
    {latitude: -30.749071, longitude: 121.472324, title: "Kalgoorlie", infoWindowContent: "<strong>Kalgoorlie</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcKalgoorlie\">Get office details</a>"},
    {latitude: -33.691176, longitude: 117.557189, title: "Katanning", infoWindowContent: "<strong>Katanning</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcKatanning\">Get office details</a>"},
    {latitude: -32.531789, longitude: 115.721341, title: "Mandurah", infoWindowContent: "<strong>Mandurah</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcMandurah\">Get office details</a>"},
    {latitude: -34.250365, longitude: 116.147165, title: "Manjimup", infoWindowContent: "<strong>Manjimup</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcManjimup\">Get office details</a>"},
    {latitude: -33.982459, longitude: 115.765361, title: "Nannup", infoWindowContent: "<strong>Nannup</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcNannup\">Get office details</a>"},
    {latitude: -31.953472, longitude: 115.914248, title: "Rivervale", infoWindowContent: "<strong>Rivervale</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcRivervale\">Get office details</a>"},
    {latitude: -31.948893, longitude: 115.795029, title: "Shenton Park", infoWindowContent: "<strong>Shenton Park</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcShentonPark\">Get office details</a>"},
    {latitude: -34.214112, longitude: 116.074472, title: "West Manjimup", infoWindowContent: "<strong>West Manjimup</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcManjimupWest\">Get office details</a>"},
    ];

    // Now let's create some markers

    for (var x = 0; x < locations_array.length; x++) {
        // Grab an individual park object out of our array
        var _park = locations_array[x];
        var myLatlng = new google.maps.LatLng(locations_array[x].latitude,locations_array[x].longitude);
        var marker = new google.maps.Marker({
            map: map,
            position: myLatlng,
            title: locations_array[x].title,
            icon: 'http://google-maps-icons.googlecode.com/files/park.png',
            clickable: true,
            infocontent: locations_array[x].infoWindowContent
        });
        google.maps.event.addListener(marker, 'click', function() {
            var infowindow = new google.maps.InfoWindow({
                content: this.infocontent
            });
            infowindow.open(map,this);
        });
        google.maps.event.addListener(marker, 'dblclick', function() {
        map.setZoom(16);
        });
    }
});
</script>

Answer 1

Trate de poner las cadenas HTML de infoWindowContent en un div con una clase que tiene un conjunto de anchura a continuación, cambiar:

 content: this.infocontent

ser

 content: $(this.infocontent)[0]