Google Maps V3: Infofenster nicht fit Informationen Ändern der Größe

Question

Problem

ich eine API V3 Karte haben, mit einem Inhaltsfenster für jeden Marker. Der Inhalt der Infofenster erstreckt sich über mehrere Zeilen, aber die Infofenster wird die Größe nicht alles passen, so dass ein iframe artigen Blättern erscheinen.

Ich habe am setContent () -Methode in der API sieht, die auf der API V3-Mailingliste zu einigen Stellen nach sollen das Problem beheben. Allerdings sieht es aus wie ich habe in der falschen Stelle setzen somit die Karte veranlassen, keine Last.

Infowindow Inhalte aus einem Feld in der locations_array bevölkert wird.

Karte Code

Hier ist der Code ich verwende, abzüglich der setContent () -Methode.

<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

Versuchen Sie, die HTML-Strings von infoWindowContent in einem div mit einer Klasse setzen, die einen Breiten Satz dann ändern muss:

 content: this.infocontent

sein

 content: $(this.infocontent)[0]