एक मानचित्र मार्कर के लिए डिफ़ॉल्ट Google मैप्स InfoWindow बहुत गोल है। मैं वर्ग कोनों के साथ एक कस्टम InfoWindow कैसे बनाऊं?
जवाबों:
EDIT कुछ शिकार के बाद, यह सबसे अच्छा विकल्प लगता है:
https://github.com/googlemaps/js-info-bubble/blob/gh-pages/examples/example.html
आप इस InfoBubble का एक अनुकूलित संस्करण देख सकते हैं जिसका मैंने ऑनलाइन स्कूबा डाइव लॉगिंग के लिए वेबसाइट डाइव सेवन पर प्रयोग किया था । यह इस तरह दिख रहा है:
यहाँ कुछ और उदाहरण हैं । वे निश्चित रूप से आपके स्क्रीनशॉट में उदाहरण के रूप में के रूप में अच्छा नहीं लग रहे हैं।
आप अकेले jquery का उपयोग करके पूरे InfoWindow को संशोधित कर सकते हैं ...
var popup = new google.maps.InfoWindow({
content:'<p id="hook">Hello World!</p>'
});यहां <p> तत्व वास्तविक InfoWindow में एक हुक के रूप में कार्य करेगा। एक बार पहले से ही आग लगने के बाद, तत्व जावास्क्रिप्ट / jquery, जैसे का उपयोग करके सक्रिय और सुलभ हो जाएगा $('#hook').parent().parent().parent().parent()।
नीचे दिए गए कोड में InfoWindow के चारों ओर 2 पिक्सेल की सीमा निर्धारित है।
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');
}
}
});आप कुछ भी कर सकते हैं जैसे एक नया सीएसएस वर्ग स्थापित करना या केवल एक नया तत्व जोड़ना।
तत्वों के साथ खेलने के लिए आप क्या चाहते हैं ...
मुझे उन्नत स्टाइल के लिए इन्फोबॉक्स सही लगा।
InfoBox एक google.maps.InfoWindow की तरह व्यवहार करता है , लेकिन यह उन्नत स्टाइलिंग के लिए कई अतिरिक्त गुणों का समर्थन करता है। InfoBox को मैप लेबल के रूप में भी इस्तेमाल किया जा सकता है। InfoBox भी google.maps.InfoWindow जैसी घटनाओं को आग लगाती है ।
अपने पृष्ठ में http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/infobox/src/infobox.js शामिल करें
इन्फिलिंडो को स्टाइल करना वेनिला जावास्क्रिप्ट के साथ काफी सीधा है। मैंने इसे लिखते समय इस थ्रेड से कुछ जानकारी का उपयोग किया था। मैंने पूर्व के संस्करणों के साथ संभावित समस्याओं को भी ध्यान में रखा (हालांकि मैंने उनके साथ इसका परीक्षण नहीं किया है)।
var infowindow = new google.maps.InfoWindow({
content: '<div id="gm_content">'+contentString+'</div>'
});
google.maps.event.addListener(infowindow,'domready',function(){
var el = document.getElementById('gm_content').parentNode.parentNode.parentNode;
el.firstChild.setAttribute('class','closeInfoWindow');
el.firstChild.setAttribute('title','Close Info Window');
el = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling;
el.setAttribute('class','infoWindowContainer');
for(var i=0; i<11; i++){
el = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling;
el.style.display = 'none';
}
});कोड सामग्री को पकड़ने के लिए एक आईडी के साथ एक div का उपयोग करके, हमेशा की तरह infowindow (प्लगइन्स, कस्टम ओवरले या विशाल कोड की कोई आवश्यकता नहीं) बनाता है। यह सिस्टम में एक हुक देता है जिसका उपयोग हम एक साधारण बाहरी स्टाइलशीट के साथ हेरफेर करने के लिए सही तत्वों को प्राप्त करने के लिए कर सकते हैं।
इसमें कुछ अतिरिक्त टुकड़े होते हैं (जिनकी कड़ाई की आवश्यकता नहीं होती है) जो कि इस में क्लोज़ इंफो विंडो के साथ डिव में हुक देने जैसी चीजों को संभालते हैं।
अंतिम लूप पॉइंटर तीर के सभी टुकड़ों को छुपाता है। मुझे खुद इसकी आवश्यकता थी क्योंकि मैं चाहता था कि इन्फिनिंडो पर पारदर्शिता हो और तीर रास्ते में मिल जाए। बेशक, हुक के साथ, अपनी पसंद के पींग के साथ तीर छवि को बदलने के लिए कोड को बदलना भी काफी सरल होना चाहिए।
यदि आप इसे jquery में बदलना चाहते हैं (कोई विचार नहीं है कि आप क्यों करेंगे) तो यह काफी सरल होना चाहिए।
मैं आमतौर पर एक जावास्क्रिप्ट डेवलपर नहीं हूँ इसलिए किसी भी विचार, टिप्पणी, आलोचनाओं का स्वागत है :)
नीचे दिए गए कोड ऑफ कोड आपकी मदद कर सकते हैं।
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'mouseover', (function(marker) {
return function() {
var content = address;
infowindow.setContent(content);
infowindow.open(map, marker);
}
})(marker));यहाँ एक आलेख है < कैसे सही ज़ूम के साथ गूगल मैप्स पर कई पते खोजने के लिए > जिसने मुझे यह हासिल करने में मदद की। आप इसे जेएस फिडेल लिंक और पूर्ण उदाहरण के लिए काम करने के लिए संदर्भित कर सकते हैं।
मुझे यकीन नहीं है कि कैसे FWIX.com यह विशेष रूप से कर रहा है, लेकिन मैं चाहूंगा कि वे कस्टम ओवरले का उपयोग कर रहे हैं ।
स्टाइल डिफॉल्ट इन्फोरविंडो हटाने के लिए आप नीचे दिए गए कोड का उपयोग कर सकते हैं। जब आप inforwindow के लिए HTML कोड का उपयोग कर सकते हैं:
var inforwindow = "<div style="border-radius: 50%"><img src='URL'></div>"; // show inforwindow image circle
marker.addListener('click', function() {
$('.gm-style-iw').next().css({'height': '0px'}); //remove arrow bottom inforwindow
$('.gm-style-iw').prev().html(''); //remove style default inforwindows
});यहां Google पर वर्तमान infowindow उदाहरण के आधार पर शुद्ध CSS समाधान दिया गया है:
https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple
#map *{
overflow: visible;
}
#content{
display: block;
position: absolute;
bottom: -8px;
left: -20px;
background-color: white;
z-index: 10001;
}यह एक त्वरित समाधान है जो छोटी जानकारी खिड़कियों के लिए अच्छी तरह से काम करेगा। वोट करने के लिए मत भूलना अगर यह मदद करता है: पी
आप पॉपअप कंटेनर / कैनवास पर अपनी खुद की सीएसएस क्लास भी जोड़ सकते हैं या आप कैसे चाहते हैं। वर्तमान गूगल मैप्स 3.7 में पॉपअप को कैनवास तत्व द्वारा स्टाइल किया गया है जो कोड में पॉपअप डिव कंटेनर को प्रस्तुत करता है। तो googlemaps 3.7 पर आप पॉपअप की पहले से ही इस तरह की घटना से प्रतिपादन प्रक्रिया में शामिल हो सकते हैं:
var popup = new google.maps.InfoWindow();
google.maps.event.addListener(popup, 'domready', function() {
if (this.content && this.content.parentNode && this.content.parentNode.parentNode) {
if (this.content.parentNode.parentNode.previousElementSibling) {
this.content.parentNode.parentNode.previousElementSibling.className = 'my-custom-popup-container-css-classname';
}
}
});IE8- में इस पर काम करना चाहते हैं, तो इस का पालन करें ।
घटनाओं और अधिक के लिए नवीनतम InfoWindow संदर्भ की जाँच करें ..
मैंने कुछ मामलों में इसे सबसे साफ पाया।
मुझे लगता है कि मैं यहां आया सबसे अच्छा जवाब है: https://codepen.io/sentrathis96/pen/yJjZDx
मैं इसका श्रेय नहीं ले सकता, मैंने गूगल मैप्स की निर्भरता को वास्तव में लोड करने के लिए ठीक करने के लिए एक अन्य कोडपेन उपयोगकर्ता से इसे लिया था
कॉल का नोट करें:
InfoWindow() // constructor