Google Maps V3: Infowindows non il ridimensionamento alle informazioni in forma

Question

problema

Ho una mappa API V3, con una finestra di contenuto per ogni indicatore. Il contenuto dei tratti infowindow su più linee, ma l'infowindow non viene ridimensionato per adattarsi a tutto, causando ad apparire un iframe-simile di scorrimento.

Ho guardato il metodo setContent () nella API, che secondo alcuni messaggi su V3 mailing list API dovrebbe risolvere il problema. Tuttavia, sembra che Ho messo nel posto sbagliato causando in tal modo la mappa non a carico.

contenuto infowindow è popolato da un campo nella locations_array.

Codice mappa

Ecco il codice che sto utilizzando, meno il metodo 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

Prova a mettere le stringhe html di infoWindowContent in un div con una classe che ha un insieme di larghezza quindi cambiare:

 content: this.infocontent

essere

 content: $(this.infocontent)[0]