خرائط Google V3: InfoWindows لا يتم تغيير حجمها لتناسب المعلومات

Question

مشكلة

لدي خريطة API V3 ، مع نافذة محتوى لكل علامة. يمتد محتوى InfoWindow عبر خطوط متعددة ، لكن InfoWindow لا يقيم حجمه لتناسب كل شيء ، مما تسبب في ظهور تمرير يشبه IFRAME.

لقد نظرت إلى طريقة setContent () في واجهة برمجة التطبيقات والتي يجب أن تصحح المشكلة وفقًا لبعض المنشورات في قائمة بريد API V3. ومع ذلك ، يبدو أنني وضعت في المكان الخطأ وبالتالي تسبب في عدم تحميل الخريطة.

يتم ملء محتوى InfoWindow من حقل في المواقع.

رمز الخريطة

إليك الرمز الذي أستخدمه ، ناقص طريقة 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

حاول وضع سلاسل HTML من InfoWindowContent في Div مع فئة لها مجموعة عرض ثم تغيير:

 content: this.infocontent

أن تكون

 content: $(this.infocontent)[0]