আমি কীভাবে গুগল ম্যাপসের মার্কারের রঙ পরিবর্তন করতে পারি?

Question

আমি চিহ্নিতকারীদের পূর্ণ একটি মানচিত্র তৈরি করতে গুগল ম্যাপস এপিআই ব্যবহার করছি, তবে আমি চাই যে একটি চিহ্নিতকারী অন্যের থেকে আলাদা হয়ে যায়। আমি মনে করি, সবচেয়ে সহজ কাজটি হ'ল মার্কের রঙটি লাল পরিবর্তে নীল করে দেওয়া। এটি করা কি সাধারণ জিনিস বা আমাকে কোনওভাবে পুরো নতুন আইকন তৈরি করতে হবে? যদি আমাকে একটি নতুন আইকন তৈরি করতে হয় তবে এটি করার সহজতম উপায়টি কী?

Comments

আপনি গতকাল থেকে এই পোস্টটি চেক করতে চাইতে পারেন: stackoverflow.com/questions/2467720/…

— ড্যানিয়েল ভ্যাসালো

অথবা সম্ভবত আরও ভাল পোস্ট স্ট্যাকওভারফ্লো.com

— ফয়জান

Answer 1

যেহেতু v2 মানচিত্রটি অবহিত করা হয়েছে, আপনি সম্ভবত v3 মানচিত্রের প্রতি আগ্রহী: https://developers.google.com/maps/docamentation/javascript/markers#simple_icons

ভি 2 মানচিত্রের জন্য:

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

আপনার কাছে সমস্ত 'নিয়মিত' পিনগুলি যুক্ত করার একটি যুক্তি থাকতে হবে এবং অন্যটি নতুন চিহ্নিতকারীকে সংজ্ঞায়িত করে 'বিশেষ' পিনগুলি ব্যবহার করবে।

Comments

ভবিষ্যতের পাঠকদের জন্য নোট: এটি Google মানচিত্রের API v2 এর জন্য যা অবনতিযুক্ত। আপনি যদি v3 ব্যবহার করছেন তবে আপনাকে অন্য কোথাও দেখতে হবে।

— পুরোহিত

আমি প্রথম লিঙ্কটিতে ক্লিক করেছি, 'রঙের' জন্য ctrl-f: কোনও ফলাফল নেই। প্রশ্নের উত্তরের উত্তরটিতে আরও বিশদ যুক্ত করা দুর্দান্ত হবে। ওপি বিশেষত জিজ্ঞাসা করেছে যে কোনও নতুন আইকন না দিয়ে রঙ পরিবর্তন করা সম্ভব কিনা ।

— qwertzguy

Answer 2

গুগল ম্যাপস এপিআই এর 3 সংস্করণ সহ, এটি করার সহজতম উপায় হ'ল বেনজমিন কেন এখানে তৈরির মতো একটি কাস্টম আইকন সেট দখল করে:

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

যদি আপনি এই সমস্ত আইকন আপনার মানচিত্র পৃষ্ঠার একই জায়গায় রাখেন, আপনি যখন একটি মার্কার তৈরি করতে পারেন তখন উপযুক্ত আইকন বিকল্পটি ব্যবহার করে কেবল রঙিন করতে পারেন:

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

এটি অত্যন্ত সহজ এবং আমি বর্তমানে যে প্রকল্পে কাজ করছি তার জন্য আমি যে পদ্ধতিটি ব্যবহার করছি এটি হ'ল।

Comments

এই উত্তর দুর্দান্ত। আমি দু: খিত ছিলাম যে গৃহীত উত্তরটি ভি 2 এর জন্য, তবে কৃতজ্ঞতার সাথে স্ক্রোলিং ডাউন করে দেওয়া হয়েছিল। ধন্যবাদ!

— অ্যাডাম টটল

আমি এমন একটি সংস্করণ তৈরি করেছি যা চিত্রগুলিতে নির্ভর করে না: stackoverflow.com/a/23163930/1689770

— জোনাথন

Answer 3

MapIconMaker: গুগল ম্যাপস v2 এর জন্য একটি লাইব্রেরি

একটি উপায় হ'ল MapIconMaker (ডেড লিঙ্ক) ব্যবহার করা । এখানে একটি উদাহরণ রয়েছে (ডেডলিঙ্ক)। গুগল ম্যাপের ডিফল্ট আইকনগুলি 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);
}

স্টাইল্ডমার্কার: গুগল ম্যাপস ভি 3 এর জন্য একটি লাইব্রেরি

যেহেতু কিছু সময়ের আগে ভি 2 ভি 3 দ্বারা প্রতিস্থাপিত হয়েছিল আমি ভেবেছিলাম এই উত্তরটি আপডেট করা উচিত। আমি কাস্টম চিহ্নিতকারীদের জন্য একটি লাইব্রেরি তৈরি করেছি যা এখানে ভি 3 ইউটিলিটি লাইব্রেরিতে পাওয়া যায় (ডেডলিঙ্ক)। এটি বিভিন্ন রঙ এবং আকারের জন্য মঞ্জুরি দেয় এবং আপনি মার্কারেও পাঠ্য রাখতে পারেন। এটি গুগল চার্টস এপিআই ব্যবহার করে কাজ করে যা গুগল ম্যাপের ধরণের চিহ্নিতকারী তৈরির জন্য পদ্ধতি রয়েছে। আপনি বরং গুগল চার্টস এপিআই সরাসরি ব্যবহার করতে চাইলে উত্স কোডটি নির্দ্বিধায় দেখতে পান।

তবে এই লাইব্রেরির বিষয়টি হ'ল এটি আপনার জন্য এই চিহ্নিতকারী চিত্রগুলির ক্লিকযোগ্য অঞ্চলগুলি সংজ্ঞায়িত করার যত্ন নেয়, সুতরাং উদাহরণস্বরূপ, পাঠ্যের দীর্ঘতর বুদবুদ ক্লিকযোগ্য অঞ্চলগুলি যেমন প্রত্যাশা করে থাকে যেমন উদাহরণ (ডেডলিঙ্ক) have

Comments

দেখে মনে হচ্ছে এটি কেবল GMaps API v2 এর সাথে সামঞ্জস্যপূর্ণ?

— টাইগ্রেন

@ ট্রিগ্রেন আমি আসলে "স্টাইল্ডমার্কার" নামে পরিচিত v3 এর জন্য সম্পূর্ণ নতুন লাইব্রেরি তৈরি করেছি যা ভি 3 ইউটিলিটি লাইব্রেরিতে পাওয়া যেতে পারে: কোড. google.com/p/google-maps-uटिलity

— বব

v3

— smp7d

@ ম্যাটটি মূলত, হ্যাঁ, এটি কেবল ভি 2 ছিল। আমি তখন থেকে একটি ভি 3 সমাধান অন্তর্ভুক্ত করার জন্য আপডেট করেছি

— বব

এফওয়াইআই, "সেটআইমেজ" গুগল ম্যাপস এপিআই v3 এর বাজারের কোনও কাজ নয়। "setIcon" ব্যবহার করার সঠিক ফাংশন।

— নিক বার্ক

Answer 4

উপাদান নকশা

প্রোগ্রামেটিক পিন রঙ সহ এখন মার্চ 2019 সম্পাদনা করুন ,

খাঁটি জাভাস্ক্রিপ্ট, কোনও চিত্র নেই, লেবেল সমর্থন করে

অবজ্ঞাপিত চার্টস এপিআইয়ের উপর আর নির্ভর করে না

    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। অকর্মা!

— জো গ্যালিন্ড

@ জোগ্যালিন্ডের রঙ আনার ক্ষেত্রে কোনও কারণেই এনক্রিপশন প্রয়োজন কি? মানে, আমি httpশিরোনামে অবগত নই এমন কোনও বিষয় প্রকাশ না করে আমি ব্যবহার করার জন্য কোনও সুরক্ষা ঝুঁকি দেখছি না

— জোনাথন

@ জোনাথনলিডার্স: এর অর্থ হল আপনার প্রকল্পের তথ্য.পুলিস্টের অনুমোদিত তালিকায় ডোমেনটি যুক্ত করতে হবে, কারণ এটি কোনও https কল নয়।

— জো গ্যালিন্ড

2019 এর জন্য আপডেট হয়েছে, আর অবহেলিত নয়

— জোনাথন

Answer 5

ব্যক্তিগতভাবে, আমি মনে করি গুগল চার্টস এপিআই দ্বারা উত্পন্ন আইকনগুলি দুর্দান্ত দেখায় এবং গতিশীলরূপে কাস্টমাইজ করা সহজ।

গুগল ম্যাপস এপিআই 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

এই অ্যান্ড্রয়েডটি কি কেবল ওয়েব ব্রাউজারগুলির জন্য?

— জোনাথন

@ জোনাথন - এটি কেবল অ্যান্ড্রয়েডের জন্যই - তিনি পোস্ট করেছেন উদাহরণটি

— জাভাতে রয়েছে

Answer 7

চিহ্নিতকারীদের কাস্টমাইজ করতে, আপনি এই অনলাইন সরঞ্জামটি থেকে এটি করতে পারেন: https://matorydesignicons.com/

আপনার ক্ষেত্রে, আপনি মানচিত্র-মার্কারটি চান যা এখানে পাওয়া যায়: https://matorydesignicons.com/icon/map-marker এবং যা আপনি অনলাইন কাস্টমাইজ করতে পারেন can

আপনি যদি কেবল ডিফল্ট লাল রঙকে নীলতে পরিবর্তন করতে চান তবে আপনি এই আইকনটি লোড করতে পারেন: http://maps.google.com/mapfiles/ms/icons/blue-dot.png

এটি এই থ্রেডে উল্লেখ করা হয়েছে: https://stackoverflow.com/a/32651327/6381715

Answer 8

তুলনামূলকভাবে সাম্প্রতিক এই নিবন্ধটি রঙিন আইকনগুলির সীমিত গুগল মানচিত্রের সাথে একটি সাধারণ উদাহরণ সরবরাহ করে।