Я использую Google Maps API для создания карты, полной маркеров, но я хочу, чтобы один маркер выделялся среди других. Я думаю, что проще всего было бы изменить цвет маркера на синий вместо красного. Это простая вещь или мне нужно как-то создать новую иконку? Если мне нужно создать новую иконку, какой самый простой способ сделать это?

Поскольку карты 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). Там пример здесь (DeadLink). Значки 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 Maps v3

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

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

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

EDITED МАРТ 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,
    });

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

Смотрите мой ответ в Google Maps API 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 Maps.