Я використовую API Карт Google, щоб створити карту, наповнену маркерами, але хочу, щоб один маркер виділявся від інших. Найпростіше, я думаю, було б змінити колір маркера на синій, а не на червоний. Це проста річ, чи потрібно мені якось створити зовсім нову ікону? Якщо мені потрібно створити нову іконку, який найпростіший спосіб зробити це?

Оскільки карти v2 застарілі, вас, мабуть, цікавлять карти v3: https://developers.google.com/maps/documentation/javascript/markers#simple_icons

Для карт v2:

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

У вас буде один набір логіки робити всі "звичайні" штифти, а інший, який робить "спеціальні" шпильки, використовуючи новий визначений маркер.

З версією 3 API Карт Google, найпростіший спосіб зробити це, схопивши набір спеціальних значків, як той, який створив тут Бенджамін Кін:

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

Якщо ви розмістите всі ці значки на тому ж місці, що і сторінка вашої карти, ви можете розфарбувати маркер просто, використовуючи відповідний параметр значка, створюючи його:

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

Це дуже просто, і це підхід, який я використовую для проекту, над яким я зараз працюю.

MapIconMaker: бібліотека для Google Maps v2

Один із способів - використовувати MapIconMaker (мертве посилання). Там приклад тут (DeadLink). Значки за замовчуванням на Картах Google мають ширину 20 пікселів та висоту 34 пікселів, тому ви можете використовувати щось подібне для емуляції:

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);
}

StyledMarker: бібліотека для Google Maps v3

Оскільки колись тому V2 замінили V3, я подумав, що мені слід оновити цю відповідь. Я створив бібліотеку для призначених для користувача маркерів , які можна знайти на бібліотеці V3 Utility тут (DeadLink). Він дозволяє використовувати різні кольори та форми, а також ви можете розмістити текст на маркері. Він працює за допомогою API графіків Google, який має методи створення маркерів типу Google Maps. Не соромтеся ознайомитися з вихідним кодом, якщо ви бажаєте використовувати API Google Charts безпосередньо.

Щодо цієї бібліотеки, однак, це те, що вона дбає про те, щоб визначити для вас регіони, які можна натискати, для цих зображень маркерів, тому, наприклад, довший міхур з текстом матиме ті області, на які можна натиснути, як і цей приклад (мертве посилання).

Дизайн матеріалу

ВИДАЛЕНО БЕРЕЗЕНЬ 2019 з програмним кольором шпильок,

ЧИСТИЙ JAVASCRIPT, НЕ ЗНАЧЕНЬ, ПІДТРИМКА ЕТИКЕТІВ

більше не покладається на застарілий графік API

    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,
    });

Особисто я думаю, що піктограми, створені API Google Charts, виглядають чудово і їх легко динамічно налаштувати.

Дивіться мою відповідь в API Google Maps 3 - спеціальний колір маркер для стандартного (крапкового) маркера

Найпростіший спосіб, який я знайшов - це використовувати BitmapDescriptorFactory.defaultMarker (), в документації навіть є приклад встановлення кольору. З мого власного коду:

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

Щоб налаштувати маркери, це можна зробити за допомогою цього веб-інструменту: 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

Ця відносно недавня стаття надає простий приклад з обмеженим набором кольорових піктограм на Картах Google.