গুগল ম্যাপস এপিআই 3 - ডিফল্ট (বিন্দু) চিহ্নিতকারীর জন্য কাস্টম চিহ্নিতকারী রঙ

Question

আমি এর অনুরূপ প্রচুর অন্যান্য প্রশ্ন দেখেছি ( এখানে , এখানে এবং এখানে ), তবে তারা সকলেই এমন উত্তরগুলি গ্রহণ করেছে যা আমার সমস্যার সমাধান করে না। সমস্যার সবচেয়ে ভাল সমাধানটি আমি খুঁজে পেয়েছি হ'ল স্টাইলড মার্কার লাইব্রেরি, যা আপনাকে চিহ্নিতকারীদের জন্য কাস্টম রঙগুলি সংজ্ঞায়িত করতে দেয় তবে আমি এটি ডিফল্ট চিহ্নিতকারী ব্যবহার করতে পারি না (গুগল ম্যাপস অনুসন্ধান করার সময় আপনি যা পেয়েছেন তা দিয়ে - মাঝখানে একটি বিন্দু), এটি কেবল একটি চিঠি বা কোনও বিশেষ আইকন সহ চিহ্নিতকারীকে সরবরাহ করবে বলে মনে হচ্ছে।

Answer 1

আপনি ইউআরএল সহ Google চার্ট এপিআই থেকে গতিশীল আইকন চিত্রগুলির জন্য অনুরোধ করতে পারেন :

http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FE7569

যা দেখতে এটির মতো দেখাচ্ছে: চিত্রটি 21x34 পিক্সেল এবং পিনের টিপটি অবস্থানে রয়েছে (10, 34)

এবং আপনি পৃথক ছায়া চিত্রও চাইবেন (যাতে এটি কাছের আইকনগুলিকে ওভারল্যাপ না করে):

http://chart.apis.google.com/chart?chst=d_map_pin_shadow

যা দেখতে এটির মতো দেখাচ্ছে: চিত্রটি 40x37 পিক্সেল এবং পিনের টিপটি অবস্থানে রয়েছে (12, 35)

আপনি যখন নিজের মার্কার ইমেজগুলি নির্মাণ করেন আপনার সেই অনুযায়ী আকার এবং অ্যাঙ্কার পয়েন্ট সেট করতে হবে:

    var pinColor = "FE7569";
    var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34));
    var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
        new google.maps.Size(40, 37),
        new google.maps.Point(0, 0),
        new google.maps.Point(12, 35));

এরপরে আপনি নিজের মানচিত্রে মার্কারটি যুক্ত করতে পারেন:

        var marker = new google.maps.Marker({
                position: new google.maps.LatLng(0,0), 
                map: map,
                icon: pinImage,
                shadow: pinShadow
            });

আপনার পরে যে রঙ কোডটি রয়েছে তার সাথে কেবল "FE7569" প্রতিস্থাপন করুন। উদাহরণ:

অনুপ্রেরণার জন্য জ্যাক বি নিম্বলের কারণে ক্রেডিট ;)

Comments

যদিও আমি সত্যিই এই উত্তরটি পছন্দ করি, ইনফোগ্রাফিক্স সম্পর্কিত Google চার্টস এপিআই (আপনি উপরে যে লিঙ্কটি সরবরাহ করেছেন) হ্রাস করা হয়েছে dep

— উদ্যোক্তা

এটি নতুন কিনা তা নিশ্চিত নন তবে আপনি ছায়াটি স্বয়ংক্রিয়ভাবে অন্তর্নির্মিত করতে আপনি _ যুক্ত করতে পারেন। উদাহরণ, चार्ट.apis.google.com/…

— লিওনেল চ্যান

@ লিওনেল চ্যান, আপনি পারেন তবে এটি ঠিক আপ হয় না এবং এটি অন্যান্য আইকনগুলির উপরেও ওভারল্যাপ হয়ে যায়। আপনি নিশ্চিত করতে চান যে পিনের আগে সমস্ত ছায়া আঁকছে।

— ম্যাটটি

@ ম্যাটবার্নস ভালভাবে এটি কারও কারও পক্ষে সহজ সমাধান হতে পারে, কেন নয়;)

— লিওনেল চ্যান

চিহ্নিতকারী তৈরি করার এই উপায়টি 14 ই মার্চ 2019 হিসাবে অবচয় করা হয়েছে It এটি আর কাজ করবে না: ত্রুটি 502

— জনি

Answer 2

আপনি যদি গুগল ম্যাপস এপিআই ভি 3 ব্যবহার করেন তবে আপনি setIconযেমন ব্যবহার করতে পারেন

marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')

অথবা মার্কার ডিআইএসের অংশ হিসাবে:

marker = new google.maps.Marker({
    icon: 'http://...'
});

অন্যান্য রঙ:

• নীল চিহ্নিতকারী
• লাল চিহ্নিতকারী
• বেগুনি চিহ্নিতকারী
• হলুদ চিহ্নিতকারী
• সবুজ চিহ্নিতকারী

বিভিন্ন রঙের সাথে ডিফল্ট চিহ্নিতকারীগুলিকে আপডেট করতে নিম্নলিখিত কোডের টুকরোটি ব্যবহার করুন।

(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ROSE)

Comments

এটি দুর্দান্ত। আপনি যদি আরও আইকন এবং রঙ পছন্দ করতে চান তবে আপনি সেগুলি এখানে পেতে পারেন: সাইট. google.com/site/gmapsde વિકાસment

— জনি ওশিকা

Answer 3

গুগল ম্যাপস এপিআই নিজেই ব্যবহার করে এখানে একটি দুর্দান্ত সমাধান দেওয়া হয়েছে। বাহ্যিক পরিষেবা নেই, কোনও অতিরিক্ত পাঠাগার নেই। এবং এটি কাস্টম আকার এবং একাধিক রঙ এবং শৈলী সক্ষম করে। সমাধান ভেক্টর মার্কার ব্যবহার করে, যা GOOGLEMAPS API কল প্রতীক ।

কয়েকটি এবং সীমিত পূর্বনির্ধারিত প্রতীকগুলি ছাড়াও, আপনি কোনও এসভিজি পাথ স্ট্রিং ( স্পেস ) নির্দিষ্ট করে যে কোনও বর্ণের যে কোনও আকারের কারুকাজ করতে পারেন ।

এটি ব্যবহার করতে, চিত্র ইউআরএলে 'আইকন' চিহ্নিতকারী বিকল্পটি সেট করার পরিবর্তে, আপনি এটিকে প্রতীক বিকল্পযুক্ত একটি অভিধানে সেট করেছেন। উদাহরণস্বরূপ, আমি এমন একটি প্রতীক কারুকাজে পরিচালনা করতে পেরেছি যা মানক মার্কারের সাথে বেশ মিল similar

function pinSymbol(color) {
    return {
        path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0',
        fillColor: color,
        fillOpacity: 1,
        strokeColor: '#000',
        strokeWeight: 2,
        scale: 1,
   };
}

var marker = new google.maps.Marker({
   map: map,
   position: new google.maps.LatLng(latitude, longitude),
   icon: pinSymbol("#FFF"),
});

আমি আপনাকে 0,0 এ আকৃতি কী পয়েন্টটি রাখতে সতর্কতা অবলম্বন করে আপনাকে চিহ্নিতকরণের আইকন কেন্দ্রিক পরামিতিগুলি সংজ্ঞায়িত করা এড়াতে হবে। আর একটি পথ উদাহরণ, বিন্দু ছাড়াই একই মার্কার:

    path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',

এবং এখানে আপনার খুব সাধারণ এবং কুরুচিপূর্ণ রঙের পতাকা রয়েছে:

    path: 'M 0,0 -1,-2 V -43 H 1 V -2 z M 1,-40 H 30 V -20 H 1 z',

আপনি ইনকস্কেপ (জিএনইউ-জিপিএল, মাল্টিপ্লাটফর্ম) এর মতো ভিজ্যুয়াল সরঞ্জাম ব্যবহার করে পাথগুলিও তৈরি করতে পারেন । কিছু দরকারী ইঙ্গিত:

• গুগল এপিআই সবেমাত্র একটি একক পথ গ্রহণ করে, তাই আপনাকে অন্য যে কোনও অবজেক্ট (বর্গক্ষেত্র, সার্কেল ... )কে একটি পথে পরিণত করতে হবে এবং তাদেরকে একক হিসাবে যোগ দিতে হবে। পাথ মেনুতে উভয় কমান্ড।
• (0,0) এ পাথ সরাতে, পাথ সম্পাদনা মোডে যান (এফ 2) সমস্ত নিয়ন্ত্রণ নোড নির্বাচন করুন এবং সেগুলি টেনে আনুন। এফ 1 দিয়ে অবজেক্টটি সরিয়ে নেওয়া, পাথ নোড কর্ডগুলি পরিবর্তন করবে না।
• রেফারেন্স পয়েন্টটি (0,0) এ রয়েছে তা নিশ্চিত করার জন্য, আপনি এটি একা নির্বাচন করতে পারেন এবং উপরের সরঞ্জামদণ্ডে হাত দিয়ে কর্ডগুলি সম্পাদনা করতে পারেন।
• এসভিজি ফাইলটি যা এক্সএমএল হিসাবে সংরক্ষণ করার পরে এডিটর দিয়ে এটি খুলুন, এসভিজি: পাথ উপাদানটি অনুসন্ধান করুন এবং 'ডি' বৈশিষ্ট্যের বিষয়বস্তু অনুলিপি করুন।

Comments

এটি একটি ভাল উত্তর। কেউ যদি এমন কোনও পথ নিয়ে আসতে পারে যা দেখতে আসল পিনের মতো লাগে, তবে এটি একটি দুর্দান্ত উত্তর হবে

— ম্যাকোরিয়াক

এই সমাধানটি ইউআরএল থেকে পিন চিত্র লোড করার চেয়ে ভাল। কারণ, যদি আপনার একক মানচিত্রে একাধিক পিন থাকে তবে এটি মানচিত্রের লোড সময়কে বাড়িয়ে তুলবে।

— আহসান

@ এমকোরিয়াক আমি কীভাবে ইঙ্কস্কেপের মতো গ্রাফিকাল সরঞ্জাম দিয়ে সেই পথগুলি আঁকতে পারি তার জন্য কিছু ইঙ্গিত যুক্ত করেছি। আপনি যদি কোনও বিদ্যমান পিএনজির সাথে মিল রাখতে চান তবে এটি কেবল ইনসকেপে আমদানি করুন এবং পথের রেফারেন্স হিসাবে এটি ব্যবহার করুন।

— ভোকিমন

বিন্দু বাদে কেউ কি বেলুনে কিছু রাখতে পারে?

— রস রজার্স

আপনি এটি আঁকুন। একমাত্র ত্রুটিটি হ'ল পিন এবং ডট সব একই পথ হওয়া উচিত। তার মানে ডট, বিন্দু নয়, একটি গর্ত। পরিবর্তে বিন্দু যাই হোক না কেন বিন্দুটি সেই আকারের সাথে পিনের আকারে একটি গর্ত হবে। (আপনি এটির মাধ্যমে দেখতে পান) বিভিন্ন রঙের সাথে বেশ কয়েকটি রঙিন আকৃতি একত্রিত করা ভাল লাগবে তবে আমি জানি এটি কেবল একটি একক (অবিচ্ছিন্ন) পথটিকে সমর্থন করে।

— ভোকিমন

Answer 4

স্টাইল্ডমার্কারের সাথে আমি যে নিকটতম জিনিসটি পেতে পেরেছি তা হ'ল এটি ।

মাঝখানে বুলেট যদিও ডিফল্ট হিসাবে তেমন বড় নয়। স্টাইল্ডমার্কার ক্লাসটি কেবল এই url তৈরি করে এবং গুগল এপিআইকে চিহ্নিতকারী তৈরি করতে বলে ।

শ্রেণীর ব্যবহার উদাহরণ থেকে আপনার পাঠ্য হিসাবে "% E2% 80% A2" ব্যবহার করুন :

var styleMaker2 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{text:"%E2%80%A2"},styleIconClass),position:new google.maps.LatLng(37.263477473067, -121.880502070713),map:map});

লাইনগুলি মন্তব্য করার জন্য আপনাকে স্টাইলডমার্ক.জেএসটি পরিবর্তন করতে হবে:

  if (text_) {
    text_ = text_.substr(0,2);
  }

এটি পাঠ্য স্ট্রিংটি 2 টি অক্ষরে ছাঁটাবে।

বিকল্পভাবে আপনি পছন্দসই রঙগুলির সাথে ডিফল্ট চিত্রের উপর ভিত্তি করে কাস্টম চিহ্নিতকারী চিত্র তৈরি করতে এবং কোডের সাথে ডিফল্ট চিহ্নিতকারীকে ওভাররাইড করতে পারেন:

marker = new google.maps.Marker({
  map:map,
  position: latlng,
  icon: new google.maps.MarkerImage(
    'http://www.gettyicons.com/free-icons/108/gis-gps/png/24/needle_left_yellow_2_24.png',
    new google.maps.Size(24, 24),
    new google.maps.Point(0, 0),
    new google.maps.Point(0, 24)
  )
});

Comments

প্রতিক্রিয়াটির জন্য ধন্যবাদ, তবে আমি ইতিমধ্যে এসকি চরিত্রগুলি ব্যবহার করে পয়েন্টটি পুনরায় তৈরি করার চেষ্টা করেছি, তবে আপনি এটি দেখতে একইরকম দেখতে পাচ্ছেন না, এবং আমি অন্যরকম কিছু লক্ষণীয়ভাবে স্থির করতে চাই না - এটি সত্যিই অসাধু বলে মনে হচ্ছে। এবং হ্যাঁ কাস্টম চিহ্নিতকারী চিত্রটি আমার বর্তমান কাজের মতো হয়ে গেছে (আমি এখান থেকে ডিফল্ট লাল পিনটি ধরলাম: মানচিত্র. google.com/intl/en_us/mapfiles/ms/micons/red-dot.png , যা আমি জিআইএমপিতে খোলে এবং ব্যবহার করেছি কালোরাইজ সরঞ্জাম), তবে এটিও নিখুঁত নয়।

— jackocnr

আমি এই উত্তরটি একমাত্র হিসাবে গ্রহণ করছি, এবং আমার ধারণা অন্য কোনও সমাধান নেই।

— জ্যাকোকনর

দুঃখিত আমি আরও সহায়ক হতে পারে না। কখনও কখনও একমাত্র উত্তরটি কম পছন্দসই হয়।

— জ্যাক বি নিমবল

Answer 5

আমি ভোকিমনের উত্তরটি কিছুটা প্রসারিত করেছি , এটি অন্যান্য বৈশিষ্ট্যগুলিও পরিবর্তনের জন্য কিছুটা সুবিধাজনক করে তুলেছে ।

function customIcon (opts) {
  return Object.assign({
    path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0',
    fillColor: '#34495e',
    fillOpacity: 1,
    strokeColor: '#000',
    strokeWeight: 2,
    scale: 1,
  }, opts);
}

ব্যবহার:

marker.setIcon(customIcon({
  fillColor: '#fff',
  strokeColor: '#000'
}));

বা কোনও নতুন চিহ্নিতকারী সংজ্ঞায়িত করার সময়:

const marker = new google.maps.Marker({
  position: {
    lat: ...,
    lng: ...
  },
  icon: customIcon({
    fillColor: '#2ecc71'
  }),
  map: map
});

Answer 6

হাই আপনি এসভিজি হিসাবে আইকন এবং রঙ সেট করতে পারেন। এই কোডটি দেখুন

/*
 * declare map and places as a global variable
 */
var map;
var places = [
    ['Place 1', "<h1>Title 1</h1>", -0.690542, -76.174856,"red"],
    ['Place 2', "<h1>Title 2</h1>", -5.028249, -57.659052,"blue"],
    ['Place 3', "<h1>Title 3</h1>", -0.028249, -77.757507,"green"],
    ['Place 4', "<h1>Title 4</h1>", -0.800101286, -76.78747820,"orange"],
    ['Place 5', "<h1>Title 5</h1>", -0.950198, -78.959302,"#FF33AA"]
];
/*
 * use google maps api built-in mechanism to attach dom events
 */
google.maps.event.addDomListener(window, "load", function () {

    /*
     * create map
     */
    var map = new google.maps.Map(document.getElementById("map_div"), {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    });

    /*
     * create infowindow (which will be used by markers)
     */
    var infoWindow = new google.maps.InfoWindow();
    /*
     * create bounds (which will be used auto zoom map)
     */
    var bounds = new google.maps.LatLngBounds();

    /*
     * marker creater function (acts as a closure for html parameter)
     */
    function createMarker(options, html) {
        var marker = new google.maps.Marker(options);
        bounds.extend(options.position);
        if (html) {
            google.maps.event.addListener(marker, "click", function () {
                infoWindow.setContent(html);
                infoWindow.open(options.map, this);
                map.setZoom(map.getZoom() + 1)
                map.setCenter(marker.getPosition());
            });
        }
        return marker;
    }

    /*
     * add markers to map
     */
    for (var i = 0; i < places.length; i++) {
        var point = places[i];
        createMarker({
            position: new google.maps.LatLng(point[2], point[3]),
            map: map,
            icon: {
                path: "M27.648 -41.399q0 -3.816 -2.7 -6.516t-6.516 -2.7 -6.516 2.7 -2.7 6.516 2.7 6.516 6.516 2.7 6.516 -2.7 2.7 -6.516zm9.216 0q0 3.924 -1.188 6.444l-13.104 27.864q-0.576 1.188 -1.71 1.872t-2.43 0.684 -2.43 -0.684 -1.674 -1.872l-13.14 -27.864q-1.188 -2.52 -1.188 -6.444 0 -7.632 5.4 -13.032t13.032 -5.4 13.032 5.4 5.4 13.032z",
                scale: 0.6,
                strokeWeight: 0.2,
                strokeColor: 'black',
                strokeOpacity: 1,
                fillColor: point[4],
                fillOpacity: 0.85,
            },
        }, point[1]);
    };
    map.fitBounds(bounds);
});

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map_div" style="height: 400px;"></div>

Answer 7

গুগল ম্যাপস এপিআইয়ের ৩.১১ সংস্করণ থেকে Iconবস্তুটি প্রতিস্থাপন করেMarkerImage । আইকন মার্কার ইমেজ হিসাবে একই পরামিতি সমর্থন করে। এমনকি আমি এটি আরও কিছুটা সোজা এগিয়ে পেয়েছি।

একটি উদাহরণ এর মত দেখতে পারে:

var image = {
  url: place.icon,
  size: new google.maps.Size(71, 71),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(17, 34),
  scaledSize: new google.maps.Size(25, 25)
};

আরও তথ্যের জন্য এই সাইটে চেক

Comments

এই প্রশ্নের উত্তর নয়, একটি মন্তব্য হওয়া উচিত

— ম্যাকারিয়াক

Answer 8

ইন ইন্টারনেট এক্সপ্লোরার , এই সমাধান SSL মধ্যে কাজ করে না।

কনসোলে ত্রুটিটি এটি হিসাবে দেখতে পাবেন:

SEC7111 : HTTPS দ্বারা নিরাপত্তা দ্বারা আপোস করা হয় এই ,

কার্যকারণ : এখানে ব্যবহারকারীর একজন হিসাবে এসএসএল ত্রুটি এড়ানোর জন্য ইউআরএল পাথের জন্য চার্ট.এপিস.কম.এর সাথে চার্ট.আপিস.কম. প্রতিস্থাপনের পরামর্শ দিয়েছেন ।

Answer 9

অন্যরা যেমন উল্লেখ করেছেন, ভোকিমনের উত্তর দুর্দান্ত তবে দুর্ভাগ্যক্রমে গুগল ম্যাপস যখন কিছু সিম্বলপথ / এসভিজি-ভিত্তিক চিহ্নিতকারী একবারে থাকে তখন কিছুটা ধীর হয়।

দেখে মনে হচ্ছে ডেটা ইউআরআই ব্যবহার করা অনেক দ্রুত, প্রায় পিএনজির সাথে সমান।

এছাড়াও এটি যেহেতু এটি একটি সম্পূর্ণ এসভিজি নথি, তাই বিন্দুর জন্য উপযুক্ত ভরাট বৃত্ত ব্যবহার করা সম্ভব। পাথটি সংশোধন করা হয়েছে তাই এটি শীর্ষ-বামে আর অফসেটে নেই, সুতরাং অ্যাঙ্করটি সংজ্ঞায়িত করা দরকার।

এখানে একটি পরিবর্তিত সংস্করণ যা এই চিহ্নিতকারীগুলি উত্পন্ন করে:

var coloredMarkerDef = {
    svg: [
        '<svg viewBox="0 0 22 41" width="22px" height="41px" xmlns="http://www.w3.org/2000/svg">',
            '<path d="M 11,41 c -2,-20 -10,-22 -10,-30 a 10,10 0 1 1 20,0 c 0,8 -8,10 -10,30 z" fill="{fillColor}" stroke="#ffffff" stroke-width="1.5"/>',
            '<circle cx="11" cy="11" r="3"/>',
        '</svg>'
    ].join(''),
    anchor: {x: 11, y: 41},
    size: {width: 22, height: 41}
};

var getColoredMarkerSvg = function(color) {
    return coloredMarkerDef.svg.replace('{fillColor}', color);
};

var getColoredMarkerUri = function(color) {
    return 'data:image/svg+xml,' + encodeURIComponent(getColoredMarkerSvg(color));
};

var getColoredMarkerIcon = function(color) {
    return {
        url: getColoredMarkerUri(color),
        anchor: coloredMarkerDef.anchor,
        size: coloredMarkerDef.size,
        scaledSize: coloredMarkerDef.size
    }
};

ব্যবহার:

var marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(latitude, longitude),
    icon: getColoredMarkerIcon("#FFF")
});

ডাউনসাইড, অনেকটা পিএনজি চিত্রের মতো, পুরো আয়তক্ষেত্রটি ক্লিকযোগ্য। তত্ত্বের ক্ষেত্রে এসভিজি পাথটি সনাক্ত করা এবং মার্কারশেপ বহুভুজ তৈরি করা খুব বেশি কঠিন নয় ।

Answer 10

আপনি এই কোডটি ব্যবহার করতে পারেন এটি কার্যকর হয়।

 var pinImage = new google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/009900/");<br>

 var marker = new google.maps.Marker({
            position: yourlatlong,
            icon: pinImage,
            map: map
        });

Answer 11

প্রতীক ভিত্তিক চিহ্নিতকারীকে একত্রিত করুন যার পথটি রূপরেখা আঁকবে, কেন্দ্রের জন্য একটি '●' অক্ষর সহ। আপনি বিন্দুটিকে অন্য পাঠ্যের ('এ', 'বি' ইত্যাদি) বিকল্প হিসাবে প্রতিস্থাপন করতে পারেন।

এই ফাংশনটি প্রদত্ত পাঠ্য (যদি থাকে তবে), পাঠ্যের রঙ এবং ভরাট রঙের সাথে চিহ্নিতকারীকে বিকল্পগুলি প্রদান করে। এটি রূপরেখার জন্য পাঠ্য রঙ ব্যবহার করে।

function createSymbolMarkerOptions(text, textColor, fillColor) {
    return {
        icon: {
            path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
            fillColor: fillColor,
            fillOpacity: 1,
            strokeColor: textColor,
            strokeWeight: 1.8,
            labelOrigin: { x: 0, y: -30 }
        },
        label: {
            text: text || '●',
            color: textColor
        }
    };
}

Answer 12

আমি কাস্টম গুগল ম্যাপ চিহ্নিতকারী তৈরির জন্য দুটি উপায় চেষ্টা করে দেখছি, এই রান কোডটি canvg.js ব্যবহার করা ব্রাউজারের জন্য সেরা উপযুক্ততা Com মন্তব্য করা-আউট কোডটি আইই 11 একসাথে সমর্থন করে না।

var marker;
var CustomShapeCoords = [16, 1.14, 21, 2.1, 25, 4.2, 28, 7.4, 30, 11.3, 30.6, 15.74, 25.85, 26.49, 21.02, 31.89, 15.92, 43.86, 10.92, 31.89, 5.9, 26.26, 1.4, 15.74, 2.1, 11.3, 4, 7.4, 7.1, 4.2, 11, 2.1, 16, 1.14];

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {
      lat: 59.325,
      lng: 18.070
    }
  });
  var markerOption = {
    latitude: 59.327,
    longitude: 18.067,
    color: "#" + "000",
    text: "ha"
  };
  marker = createMarker(markerOption);
  marker.setMap(map);
  marker.addListener('click', changeColorAndText);
};

function changeColorAndText() {
  var iconTmpObj = createSvgIcon( "#c00", "ok" );
  marker.setOptions( {
                icon: iconTmpObj
            } );
};

function createMarker(options) {
  //IE MarkerShape has problem
  var markerObj = new google.maps.Marker({
    icon: createSvgIcon(options.color, options.text),
    position: {
      lat: parseFloat(options.latitude),
      lng: parseFloat(options.longitude)
    },
    draggable: false,
    visible: true,
    zIndex: 10,
    shape: {
      coords: CustomShapeCoords,
      type: 'poly'
    }
  });

  return markerObj;
};

function createSvgIcon(color, text) {
  var div = $("<div></div>");

  var svg = $(
    '<svg width="32px" height="43px"  viewBox="0 0 32 43" xmlns="http://www.w3.org/2000/svg">' +
    '<path style="fill:#FFFFFF;stroke:#020202;stroke-width:1;stroke-miterlimit:10;" d="M30.6,15.737c0-8.075-6.55-14.6-14.6-14.6c-8.075,0-14.601,6.55-14.601,14.6c0,4.149,1.726,7.875,4.5,10.524c1.8,1.801,4.175,4.301,5.025,5.625c1.75,2.726,5,11.976,5,11.976s3.325-9.25,5.1-11.976c0.825-1.274,3.05-3.6,4.825-5.399C28.774,23.813,30.6,20.012,30.6,15.737z"/>' +
    '<circle style="fill:' + color + ';" cx="16" cy="16" r="11"/>' +
    '<text x="16" y="20" text-anchor="middle" style="font-size:10px;fill:#FFFFFF;">' + text + '</text>' +
    '</svg>'
  );
  div.append(svg);

  var dd = $("<canvas height='50px' width='50px'></cancas>");

  var svgHtml = div[0].innerHTML;

  //todo yao gai bu dui
  canvg(dd[0], svgHtml);

  var imgSrc = dd[0].toDataURL("image/png");
  //"scaledSize" and "optimized: false" together seems did the tricky ---IE11  &&  viewBox influent IE scaledSize
  //var svg = '<svg width="32px" height="43px"  viewBox="0 0 32 43" xmlns="http://www.w3.org/2000/svg">'
  //    + '<path style="fill:#FFFFFF;stroke:#020202;stroke-width:1;stroke-miterlimit:10;" d="M30.6,15.737c0-8.075-6.55-14.6-14.6-14.6c-8.075,0-14.601,6.55-14.601,14.6c0,4.149,1.726,7.875,4.5,10.524c1.8,1.801,4.175,4.301,5.025,5.625c1.75,2.726,5,11.976,5,11.976s3.325-9.25,5.1-11.976c0.825-1.274,3.05-3.6,4.825-5.399C28.774,23.813,30.6,20.012,30.6,15.737z"/>'
  //    + '<circle style="fill:' + color + ';" cx="16" cy="16" r="11"/>'
  //    + '<text x="16" y="20" text-anchor="middle" style="font-size:10px;fill:#FFFFFF;">' + text + '</text>'
  //    + '</svg>';
  //var imgSrc = 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg);

  var iconObj = {
    size: new google.maps.Size(32, 43),
    url: imgSrc,
    scaledSize: new google.maps.Size(32, 43)
  };

  return iconObj;
};

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Your Custom Marker </title>
  <style>
    /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
    #map {
      height: 100%;
    }
    /* Optional: Makes the sample page fill the window. */
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="map"></div>
    <script src="https://canvg.github.io/canvg/canvg.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
</body>

</html>

Answer 13

আমি ভোকিমনের আঁকানো মার্কারটি উন্নত করতে এবং এটি Google মানচিত্রের সাথে আরও বেশি মিল রাখার জন্য দীর্ঘ সময় চেষ্টা করেছি (এবং বেশ সফল)। এই কোডটি আমি পেয়েছি:

let circle=true;

path = 'M 0,0  C -0.7,-9 -3,-14 -5.5,-18.5 '+   
'A 16,16 0 0,1 -11,-29 '+  
'A 11,11 0 1,1 11,-29 '+  
'A 16,16 0 0,1 5.5,-18.5 '+  
'C 3,-14 0.7,-9 0,0 z '+  
['', 'M -2,-28 '+  
'a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0'][new Number(circle)];   

আমি এটি 0.8 দ্বারাও স্কেল করেছি।

Answer 14

পাথের জন্য এটিকে চার্ট.googleapis.com এ পরিবর্তন করুন, অন্যথায় SSL কাজ করবে না

Answer 15

সুইফ্ট এবং গুগল ম্যাপস এপিআই ভি 3 ব্যবহার করে এটি করা সহজতম উপায় ছিল:

icon = GMSMarker.markerImageWithColor(UIColor.blackColor())

আশা করি এটি কাউকে সাহায্য করবে

Answer 16

এগুলি কাস্টম সার্কুলার মার্কার

small_red:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiklEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NUlH5v9rF5f+ZoCAwHaig8B8oPhOmKC1NU/P//7Q0DByrqgpSGAtSdOCAry9WRXt9fECK9oIUPXwYFYVV0e2ICJCi20SbFAuyG5uiECUlkKIQmOPng3y30d0d7Lt1bm4w301jQAOgcNoIDad1yOEEAFm9fSv/VqtJAAAAAElFTkSuQmCC

small_yellow:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAi0lEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NijL7v3p1+v8zZ6rAdGCg4X+g+EyYorS0NNv////PxMCxsRYghbEgRQcOHCjGqmjv3kKQor0gRQ8fPmzHquj27WaQottEmxQLshubopAQI5CiEJjj54N8t3FjFth369ZlwHw3jQENgMJpIzSc1iGHEwB8p5qDBbsHtAAAAABJRU5ErkJggg==

small_green:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiElEQVR42mNgQIAoIF4NxGegdCCSHAMzEC81izL7n746/X/VmSowbRho+B8oPhOmKM02zfb/TCzQItYCpDAWpOhA8YFirIoK9xaCFO0FKXrY/rAdq6Lm280gRbeJNikWZDc2RUYhRiBFITDHzwf5LmtjFth3GesyYL6bxoAGQOG0ERpO65DDCQDX7ovT++K9KQAAAABJRU5ErkJggg==

small_blue:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiklEQVR42mNgQIAoIF4NxGegdCCSHAMzEC81M4v6n56++n9V1RkwbWgY+B8oPhOmKM3WNu3/zJn/MbCFRSxIYSxI0YHi4gNYFRUW7gUp2gtS9LC9/SFWRc3Nt0GKbhNtUizIbmyKjIxCQIpCYI6fD/JdVtZGsO8yMtbBfDeNAQ2AwmkjNJzWIYcTAMk+i9OhipcQAAAAAElFTkSuQmCC

small_purple:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAi0lEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NMov6vzp99f8zVWfAdKBh4H+g+EyYorQ027T//2f+x8CxFrEghbEgRQcOFB/Aqmhv4V6Qor0gRQ8ftj/Equh2822QottEmxQLshubohCjEJCiEJjj54N8tzFrI9h36zLWwXw3jQENgMJpIzSc1iGHEwBt95qDejjnKAAAAABJRU5ErkJggg==

এগুলি 9x9 পিএনজি চিত্র।

আপনার পৃষ্ঠায় আসার পরে আপনি কেবল এগুলিকে টেনে আনতে পারেন এবং আপনার আসল পিএনজি ফাইল থাকবে।

Answer 17

আপনি রঙ কোডও ব্যবহার করতে পারেন।

 const marker: Marker = this.map.addMarkerSync({
    icon: '#008000',
    animation: 'DROP',
    position: {lat: 39.0492127, lng: -111.1435662},
    map: this.map,
 });

Answer 18

কখনও কখনও কিছু সহজ, জটিল উত্তর দেওয়া যেতে পারে। আমি বলছি না যে উপরের উত্তরগুলির মধ্যে কোনওটিই ভুল, তবে আমি কেবল প্রয়োগ করব, এটি এতটা সহজ হিসাবে করা যেতে পারে:

আমি জানি এই প্রশ্নটি পুরানো, তবে যদি কেউ কেবল পিন বা মার্কার রঙে পরিবর্তন করতে চান, তবে ডকুমেন্টেশনটি দেখুন: https : //deلافers.google.com/maps/docamentation/android-sdk/marker

আপনি যখন নিজের চিহ্নিতকারী যুক্ত করবেন তখন কেবল আইকন-সম্পত্তি সেট করুন:

GoogleMap gMap;
LatLng latLng;
....
// write your code...
....
gMap.addMarker(new MarkerOptions()
    .position(latLng)
    .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_GREEN));

চয়ন করতে 10 টি ডিফল্ট রঙ রয়েছে । যদি এটি যথেষ্ট না হয় (সহজ সমাধান) তবে আমি সম্ভবত আরও জটিল প্রয়োজন পূরণ করে অন্যান্য উত্তরগুলিতে আরও জটিলতার জন্য যেতে চাই।

PS: আমি অন্য উত্তরে অনুরূপ কিছু লিখেছি এবং অতএব আমার সেই উত্তরটি উল্লেখ করা উচিত, তবে শেষ বার যখন আমি এটি করেছি তখন উত্তরটি পোস্ট করার জন্য বলা হয়েছিল যেহেতু এটি এত সংক্ষিপ্ত ছিল (এই হিসাবে) ..