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

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. Вот пример здесь. Значки Google Maps по умолчанию имеют ширину 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". Кроме того, вы можете setImage на маркере, а не создавать новый маркер с новым значком. Поэтому, если вы хотите выделить функцию, вы можете пойти с чем-то вроде этого, используя функцию выше:

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 напрямую.

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

(устарело) вам не нужны никакие пользовательские библиотеки для Google Maps v3.

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

С Мэтт Бернс Это работает по состоянию на октябрь 2014 года, но устарел.

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

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

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

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