[Css] تصميم خرائط جوجل InfoWindow


Answers

يمكنك تعديل كامل InfoWindow باستخدام jquery وحده ...

var popup = new google.maps.InfoWindow({
    content:'<p id="hook">Hello World!</p>'
});

هنا سيكون العنصر <p> بمثابة خطاف في InfoWindow الفعلي. بمجرد تنشيط domready ، سيصبح العنصر نشطًا ويمكن الوصول إليه باستخدام javascript / jquery ، مثل $('#hook').parent().parent().parent().parent() .

التعليمات البرمجية أدناه فقط بتعيين حدود 2 بكسل حول InfoWindow.

google.maps.event.addListener(popup, 'domready', function() {
    var l = $('#hook').parent().parent().parent().siblings();
    for (var i = 0; i < l.length; i++) {
        if($(l[i]).css('z-index') == 'auto') {
            $(l[i]).css('border-radius', '16px 16px 16px 16px');
            $(l[i]).css('border', '2px solid red');
        }
    }
});

يمكنك فعل أي شيء مثل إعداد فئة CSS جديدة أو إضافة عنصر جديد فقط.

العب مع العناصر للحصول على ما تحتاجه ...

Question

لقد كنت أحاول أن InfoWindow Google Maps InfoWindow ، لكن الوثائق محدودة للغاية حول هذا الموضوع. كيف يمكنك تصميم InfoWindow ؟




يمكنك استخدام فئة css أيضًا.

$('#hook').parent().parent().parent().siblings().addClass("class_name");

يوم جيد!




استخدمت الشفرة التالية لتطبيق بعض CSS الخارجي:

boxText = document.createElement("html");
boxText.innerHTML = "<head><link rel='stylesheet' href='style.css'/></head><body>[some html]<body>";

infowindow.setContent(boxText);
infowindow.open(map, marker);