Ответ 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

У вас будет один набор логических операций для всех "обычных" контактов, а другой - "специальный" вывод с использованием нового маркера.

Ответ 2

С версией 3 API Карт Google самым простым способом может быть захват пользовательского набора значков, например, тот, который создал здесь Бенджамин Кин:

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

Если вы поместите все эти значки на том же месте, что и ваша страница карты, вы можете раскрасить маркер просто с помощью соответствующей опции значка при его создании:

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

Это очень просто, и это подход, который я использую для проекта, над которым я сейчас работаю.

Ответ 3

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

Одним из способов является использование MapIconMaker. Там пример здесь. Значки Google Maps по умолчанию имеют ширину 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 v3

Поскольку V2 был заменен на V3 некоторое время назад, я подумал, что должен обновить этот ответ. Я создал библиотеку для пользовательских маркеров, которую можно найти в библиотеке утилит V3 здесь. Он позволяет использовать разные цвета и формы, а также размещать текст на маркере. Он работает с помощью Google Charts API, в котором есть методы для создания маркеров типа Google Maps. Не стесняйтесь смотреть на исходный код, если вы предпочитаете использовать Google Charts API напрямую.

Суть этой библиотеки, однако, в том, что она позаботится о том, чтобы определить кликабельные области этих маркерных изображений для вас, поэтому, например, более длинный пузырь с текстом будет иметь кликабельные области, которые можно ожидать, как в этом примере.

Ответ 4

Материал Дизайн

РЕДАКТОР МАРТА 2019 теперь с программным цветом булавки,

ЧИСТЫЙ JAVASCRIPT, НИКАКИХ ИЗОБРАЖЕНИЙ, ПОДДЕРЖИВАЕТ ЭТИКЕТКИ

больше не использует устаревший API-интерфейс Charts

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

Ответ 5

Лично я думаю, что значки, созданные API Google Chart, выглядят великолепно и легко настраиваются динамически.

Посмотрите мой ответ на API Карт Google 3 - Пользовательский цвет маркера для маркера по умолчанию (точка)

Ответ 6

Самый простой способ, который я нашел, - использовать BitmapDescriptorFactory.defaultMarker(), документация, даже имеет пример установки цвета. Из моего собственного кода:

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

Ответ 7

Чтобы настроить маркеры, вы можете сделать это с помощью этого онлайн-инструмента: https://materialdesignicons.com/

В вашем случае вам нужна карта-маркер, которая доступна здесь: https://materialdesignicons.com/icon/map-marker и которую вы можете настроить онлайн.

Если вы просто хотите изменить красный цвет по умолчанию на синий, вы можете загрузить этот значок: http://maps.google.com/mapfiles/ms/icons/blue-dot.png

Было упомянуто в этой теме: fooobar.com/info/1608001/...