Google Haritalar API'sını işaretçilerle dolu bir harita oluşturmak için kullanıyorum, ancak bir işaretleyicinin diğerlerinden öne çıkmasını istiyorum. Sanırım yapılacak en basit şey, işaretleyicinin rengini kırmızı yerine maviye değiştirmek olacaktır. Bu yapılacak basit bir şey mi yoksa bir şekilde tamamen yeni bir ikon oluşturmak zorunda mıyım? Yeni bir simge oluşturmak zorunda kalırsam, bunu yapmanın en kolay yolu nedir?

V2 haritaları kullanımdan kaldırıldığından, muhtemelen v3 haritalarıyla ilgileniyorsunuz: https://developers.google.com/maps/documentation/javascript/markers#simple_icons

V2 haritaları için:

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

Bir mantık kümesinin tüm 'normal' iğneleri yapmasını ve diğerini de tanımlanan yeni işaretçiyi kullanarak 'özel' iğneleri yapması gerekir.

Google Haritalar API'sının 3. sürümünde, bunu yapmanın en kolay yolu, Benjamin Keen'in burada oluşturduğu gibi özel bir simge seti almak olabilir:

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

Tüm bu simgeleri harita sayfanızla aynı yere koyarsanız, bir İşaretleyiciyi oluştururken yalnızca uygun simge seçeneğini kullanarak renklendirebilirsiniz:

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

Bu çok kolay ve şu anda üzerinde çalıştığım proje için kullandığım yaklaşım.

MapIconMaker: Google Maps v2 için bir kütüphane

Bunun bir yolu MapIconMaker (deadlink) kullanmaktır. Burada bir örnek var (deadlink). Google Haritalar varsayılan simgeleri 20 piksel genişlik ve 34 piksel yüksekliktir, bu nedenle taklit etmek için böyle bir şey kullanabilirsiniz:

var newIcon = MapIconMaker.createMarkerIcon({width: 20, height: 34, primaryColor: "#0000FF", cornercolor:"#0000FF"});
var marker = new GMarker(map.getCenter(), {icon: newIcon});

Kendinizi daha da kolaylaştırmak için bir işleve bile sarabilirsiniz:

function getIcon(color) {
    return MapIconMaker.createMarkerIcon({width: 20, height: 34, primaryColor: color, cornercolor:color});
}

Yarattığım tüm işaretçiler için kişisel olarak kullanıyorum. Bir heves rengini değiştirme seçeneğine sahip olmayı tercih ederim.

Güncelleme: Varsayılan simgenin Onaltılık rengi "# FE7569" şeklindedir. Ayrıca, yeni bir simgeye sahip yeni bir İşaretleyici oluşturmak yerine Görüntüyü bir İşaretleyiciye ayarlayabilirsiniz. Bir işlevin vurgulamasını istiyorsanız yukarıdaki işlevi kullanarak böyle bir şeyle gidebilirsiniz:

function highlightMarker(marker, highlight) {
    var color = "#FE7569";
    if (highlight) {
        color = "#0000FF";
    }
    marker.setImage(getIcon(color).image);
}

StyledMarker: Google Maps v3 için bir kütüphane

V2 bir süre önce V3 ile değiştirildiği için bu cevabı güncellemem gerektiğini düşündüm. Burada özel işaretçiler için bir kütüphane oluşturdum ( burada V3 Utility Library ) (deadlink). Farklı renklere ve şekillere izin verir ve metni işaretçiye de yerleştirebilirsiniz. Google Haritalar tür işaretçileri oluşturma yöntemleri olan Google Grafikler API'sını kullanarak çalışır. Google Grafikler API'sını doğrudan kullanmayı tercih ederseniz kaynak koduna bakmaktan çekinmeyin.

Bununla birlikte, bu kütüphane ile ilgili olan şey, bu işaretçi görüntülerinin tıklanabilir bölgelerini sizin için tanımlamaya özen göstermesidir, bu nedenle, örneğin, metinli daha uzun baloncuğun, bu örnek gibi ( tıklanabilir bağlantı) beklendiği tıklanabilir bölgelere sahip olması gerekir .

Materyal Tasarımı

Mart 2019'da programlı pin rengi ile DÜZENLENMİŞ ,

SAF JAVASCRIPT, GÖRÜNTÜ YOK, ETİKETLERİ DESTEKLİYOR

artık kullanımdan kaldırılmış Grafikler API'sına güvenmiyor

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

Şahsen, Google Grafikler API'sı tarafından oluşturulan simgelerin harika göründüğünü ve dinamik olarak özelleştirilmesinin kolay olduğunu düşünüyorum.

Cevabımı Google Maps API 3'te görün - Varsayılan (nokta) işaretleyici için özel işaretleyici rengi

Bulduğum en basit yolu) BitmapDescriptorFactory.defaultMarker (kullanmaktır belgeler bile rengini ayarlamaya ilişkin bir örnek vardır. Kendi kodumdan:

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

İşaretçileri özelleştirmek için bunu şu çevrimiçi araçtan yapabilirsiniz: https://materialdesignicons.com/

Sizin durumunuzda, burada bulunan harita işaretleyicisini istiyorsunuz : https://materialdesignicons.com/icon/map-marker ve çevrimiçi olarak özelleştirebilirsiniz.

Varsayılan Kırmızı rengi Mavi olarak değiştirmek isterseniz, bu simgeyi yükleyebilirsiniz: http://maps.google.com/mapfiles/ms/icons/blue-dot.png

Bu başlıkta bahsedildi: https://stackoverflow.com/a/32651327/6381715

Bu nispeten yeni makale , sınırlı Google Haritalar renkli simgeler kümesiyle basit bir örnek sunmaktadır.