मैं Google मैप्स मार्कर का रंग कैसे बदल सकता हूं?

Question

मैं मार्करों से भरा नक्शा बनाने के लिए Google मैप्स एपीआई का उपयोग कर रहा हूं, लेकिन मैं चाहता हूं कि एक मार्कर दूसरों से अलग हो जाए। सबसे सरल बात, मुझे लगता है, लाल के बजाय मार्कर का रंग नीले रंग में बदलना होगा। क्या यह आसान काम है या मुझे किसी भी तरह से एक नया आइकन बनाना है? अगर मुझे एक नया आइकन बनाना है, तो ऐसा करने का सबसे आसान तरीका क्या है?

Comments

आप इस पोस्ट को कल से देख सकते हैं: stackoverflow.com/questions/2467720/…

— डैनियल वैसलो

या शायद एक बेहतर पोस्ट stackoverflow.com/questions/7095574/…

— Faizan

Answer 1

चूँकि v2 का मानचित्रण घटाया गया है, आप शायद v3 मानचित्रों में रुचि रखते हैं: https://developers.google.com/maps/documentation/javascript/markers#simple_icons

V2 नक्शे के लिए:

http://code.google.com/apis/maps/documentation/overlays.html#Icons_overview

आपके पास तर्क का एक सेट होता है जो सभी 'नियमित' पिन करते हैं, और एक और जो नए मार्कर का उपयोग करके 'विशेष' पिन (ओं) को करता है।

Comments

भविष्य के पाठकों के लिए ध्यान दें: यह Google मैप्स एपीआई v2 के लिए है जिसे अपग्रेड किया गया है। यदि आप v3 का उपयोग कर रहे हैं, तो आपको कहीं और देखने की आवश्यकता है।

— पुजारी

मैंने 'color' के लिए पहले लिंक, ctrl-f पर क्लिक किया: कोई परिणाम नहीं। वास्तव में प्रश्न का उत्तर देने के लिए अधिक विवरण जोड़ना बहुत अच्छा होगा। ओपी विशेष रूप से पूछता है कि क्या नया आइकन बनाए बिना रंग बदलना संभव है ।

— qwertzguy

Answer 2

Google मैप्स एपीआई के संस्करण 3 के साथ, ऐसा करने का सबसे आसान तरीका कस्टम आइकन सेट को हथियाने से हो सकता है, जैसे कि बेंजामिन कीन ने यहां बनाया है:

http://www.benjaminkeen.com/?p=105

यदि आप उन सभी आइकन को अपने मानचित्र पृष्ठ के समान स्थान पर रखते हैं, तो आप इसे बनाते समय उपयुक्त आइकन विकल्प का उपयोग करके एक मार्कर को रंगीन कर सकते हैं:

var beachMarker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  icon: 'brown_markerA.png'
});

यह सुपर-आसान है, और वह दृष्टिकोण है जो मैं उस परियोजना के लिए उपयोग कर रहा हूं जो मैं वर्तमान में काम कर रहा हूं।

Comments

यह जवाब कमाल का है। मुझे दुःख था कि स्वीकृत उत्तर V2 के लिए है, लेकिन शुक्र है कि नीचे स्क्रॉल करके भुगतान किया गया। धन्यवाद!

— एडम टटल ने

मैंने एक संस्करण बनाया जो छवियों पर भरोसा नहीं करता है: stackoverflow.com/a/23163930/1689770

— जोनाथन

Answer 3

MapIconMaker: Google Maps v2 के लिए एक पुस्तकालय

एक तरीका MapIconMaker (डेडलिंक) का उपयोग करना है । यहाँ एक उदाहरण है (डेडलिंक)। Google मानचित्र डिफ़ॉल्ट आइकन 20px चौड़ाई और 34px ऊंचाई के हैं, इसलिए आप अनुकरण करने के लिए कुछ इस तरह का उपयोग कर सकते हैं:

var newIcon = MapIconMaker.createMarkerIcon({width: 20, height: 34, primaryColor: "#0000FF", cornercolor:"#0000FF"});
var marker = new GMarker(map.getCenter(), {icon: newIcon});

आप इसे किसी फंक्शन में भी लपेट सकते हैं ताकि चीजें अपने आप आसान हो सकें:

function getIcon(color) {
    return MapIconMaker.createMarkerIcon({width: 20, height: 34, primaryColor: color, cornercolor:color});
}

यही कारण है कि मैं व्यक्तिगत रूप से मेरे द्वारा बनाए गए सभी मार्करों के लिए उपयोग करता हूं। मुझे पसंद है कि मैं एक व्हिम के रंग बदलने का विकल्प चुनूं।

अद्यतन: डिफ़ॉल्ट आइकन का हेक्स रंग "# FE7569" है। इसके अलावा, आप एक नए चिह्न के साथ एक नया मार्कर बनाने के बजाय एक मार्कर पर सेट कर सकते हैं। इसलिए यदि आप चाहते हैं कि कोई फ़ंक्शन आपको हाइलाइट करे, तो आप ऊपर दिए गए फ़ंक्शन का उपयोग करके कुछ इस तरह से जा सकते हैं:

function highlightMarker(marker, highlight) {
    var color = "#FE7569";
    if (highlight) {
        color = "#0000FF";
    }
    marker.setImage(getIcon(color).image);
}

स्टाइलल्डमार: Google मैप्स v3 के लिए एक पुस्तकालय

चूंकि V2 को V3 द्वारा बदल दिया गया था, कुछ समय पहले मैंने सोचा था कि मुझे इस उत्तर को अपडेट करना चाहिए। मैंने कस्टम मार्करों के लिए एक लाइब्रेरी बनाई जो यहां V3 यूटिलिटी लाइब्रेरी (डेडलिंक) पर पाई जा सकती है । यह विभिन्न रंगों और आकृतियों के लिए अनुमति देता है, और आप मार्कर पर भी पाठ रख सकते हैं। यह Google चार्ट API का उपयोग करके काम करता है जिसमें Google मानचित्र प्रकार मार्कर बनाने के लिए तरीके हैं। यदि आप सीधे Google चार्ट API का उपयोग करते हैं, तो स्रोत कोड को देखने के लिए स्वतंत्र महसूस करें।

हालाँकि, उस लाइब्रेरी के बारे में यह बात है कि यह आपके लिए इन मार्कर छवियों के क्लिक करने योग्य क्षेत्रों को परिभाषित करने का ध्यान रखती है, इसलिए, उदाहरण के लिए, पाठ के साथ लंबे बुलबुले में क्लिक करने योग्य क्षेत्र एक अपेक्षा होंगे, जैसे यह उदाहरण (डेडलिंक)।

Comments

ऐसा लगता है कि यह केवल GMaps API v2 के साथ संगत है?

— बाघिन

@Tigraine मैंने वास्तव में v3 के लिए उपयोग करने के लिए एक पूरी तरह से नया पुस्तकालय बनाया है, जिसे "स्टाइलल्डमर्कर" कहा जाता है जो कि v3 यूटिलिटी लाइब्रेरी पर पाया जा सकता है: code.google.com/p/google-maps-utility-library-v3/wiki-Lbooks

— Bob

— वी

@ मूल रूप से, हाँ, यह केवल v2 था। जब से मैंने v3 समाधान शामिल करने के लिए अद्यतन किया है

— Bob

FYI करें, "setImage" Google Maps API v3 में बाज़ार का कार्य नहीं है। "setIcon" का उपयोग करने के लिए सही कार्य है।

— निक बोर्क

Answer 4

सामग्री डिजाइन

प्रोग्राम मार्च 2019 अब प्रोग्राम पिन कलर के साथ,

शुद्ध JAVASCRIPT, कोई छवि, समर्थन लेबल

अब पदावनत चार्ट एपीआई पर निर्भर नहीं करता है

    var pinColor = "#FFFFFF";
    var pinLabel = "A";

    // Pick your pin (hole or no hole)
    var pinSVGHole = "M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z";
    var labelOriginHole = new google.maps.Point(12,15);
    var pinSVGFilled = "M 12,2 C 8.1340068,2 5,5.1340068 5,9 c 0,5.25 7,13 7,13 0,0 7,-7.75 7,-13 0,-3.8659932 -3.134007,-7 -7,-7 z";
    var labelOriginFilled =  new google.maps.Point(12,9);


    var markerImage = {  // https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerLabel
        path: pinSVGFilled,
        anchor: new google.maps.Point(12,17),
        fillOpacity: 1,
        fillColor: pinColor,
        strokeWeight: 2,
        strokeColor: "white",
        scale: 2,
        labelOrigin: labelOriginFilled
    };
    var label = {
        text: pinLabel,
        color: "white",
        fontSize: "12px",
    }; // https://developers.google.com/maps/documentation/javascript/reference/marker#Symbol
    this.marker        = new google.maps.Marker({
        map: map.MapObject,
        //OPTIONAL: label: label,
        position: this.geographicCoordinates,
        icon: markerImage,
        //OPTIONAL: animation: google.maps.Animation.DROP,
    });

Comments

इस सुविधा को दुर्भाग्य से हटा दिया गया है जैसा कि आप यहाँ देख सकते हैं । यह ऐसी निराशाजनक स्थिति है, जहां यह पदावनत है और पिछले संस्करण का मैंने उपयोग किया है, MapIconMakerपहले से ही पदावनत कर दिया गया है।

— जेरोर्ड्स

ध्यान दें कि यह https, केवल http के साथ काम नहीं करता है। क्षमा!

— जोगलिंद

@JoeGalind क्या कोई कारण है कि रंग लाने के दौरान एन्क्रिप्शन की आवश्यकता होती है? मेरा मतलब है, मैं उपयोग करने के लिए कोई सुरक्षा जोखिम नहीं देखता हूं httpजब तक कि यह कुछ ऐसा उजागर नहीं कर रहा है जो मुझे हेडर में पता नहीं है

— जोनाथन

@JonathanLeaders: इसका मतलब है कि आपको अपने प्रोजेक्ट की जानकारी के लिए डोमेन को अनुमत सूची में जोड़ना होगा, क्योंकि यह कोई https कॉल नहीं है।

— जोजीलिंड

2019 के लिए अपडेट किया गया, अब नहीं

— जोनाथन

Answer 5

व्यक्तिगत रूप से, मुझे लगता है कि Google चार्ट एपीआई द्वारा उत्पन्न आइकन बहुत अच्छे लगते हैं और गतिशील रूप से अनुकूलित करने में आसान होते हैं।

Google मानचित्र API 3 पर मेरा उत्तर देखें - डिफ़ॉल्ट (डॉट) मार्कर के लिए कस्टम मार्कर रंग

Comments

यह @ जोनाथन के उत्तर के समान है, और सेवा दुर्भाग्य से अब अपदस्थ है।

— टोड ओवेन

Answer 6

मैंने जो सबसे आसान तरीका पाया है, वह है बिटमैपडेसक्रिप्‍टरफैक्टरी.डेफॉल्टमर () प्रलेखन का उपयोग करना, यहां तक ​​कि रंग सेट करने का एक उदाहरण है। मेरे अपने कोड से:

MarkerOptions marker = new MarkerOptions()
            .title(formatInfo(data))
            .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE))
            .position(new LatLng(data.getLatitude(), data.getLongitude()))

Comments

क्या यह Android केवल, या वेब ब्राउज़र के लिए भी है?

— जोनाथन

@ जोनाथन - यह केवल एंड्रॉइड के लिए है - उन्होंने जो उदाहरण पोस्ट किया है वह जावा में है

— dazza5000

Answer 7

मार्करों को अनुकूलित करने के लिए, आप इसे इस ऑनलाइन टूल से कर सकते हैं: https://materialdesignicons.com/

आपके मामले में, आप मानचित्र-मार्कर चाहते हैं, जो यहां उपलब्ध है: https://materialdesignicons.com/icon/map-marker और जिसे आप ऑनलाइन अनुकूलित कर सकते हैं।

यदि आप बस डिफ़ॉल्ट लाल रंग को ब्लू में बदलना चाहते हैं, तो आप इस आइकन को लोड कर सकते हैं: http://maps.google.com/mapfiles/ms/icons/blue-dot.png

इसका उल्लेख इस सूत्र में किया गया है: https://stackoverflow.com/a/32651327/6381715

Answer 8

यह अपेक्षाकृत हालिया लेख रंगीन माउस के सीमित Google मानचित्र सेट के साथ एक सरल उदाहरण प्रदान करता है।