your friend is over here
http://groups.google.com/group/google-chart-api/web/chart-types-for-map-pins
This is cut pase untested but you can take it from here
This iconFactory method suppports that url
then you can simply do
iconFactory = new iconImageFactory();
oIcon = iconFactory.newStatusIcon("letter","Cat1");
then on your marker you can do
var lMarker = new google.maps.Marker({
position: latlng,
map: map,
icon: oIcon, //"A", if sIcon is blank the markers wont show on
the map except the 1st Icon
title: sTitle //show as tool tip
});
it assumes
var iconFactory;
// global myMap object that looks like this
var ecMap = {
//Icons: null,
map: null,
bounds: null,
geocoder: null,
trafficInfo: null, //traffic overlay
iconStyles:null,
category:null,
orderCluster: null, //reference to new MarkerClusterer(ecMap.map,
ecMap.orderOverlays, mcOptions);
markerOverlays : [], //array of order marker we add to map
}
and
var mapIconStyles = {
letter: { value: "d_map_pin_letter", text: "Letter" },
xletter: { value: "d_map_xpin_letter", text: "Styled Letter" },
icon: { value: "d_map_pin_icon", text: "icon" },
spin: { value: "d_map_spin", text: "Spin" },
xspin: { value: "d_map_xpin_shadow", text: "Style Spin" }
}
var colors = new
Array("000000","000033","000066","000099","0000CC","0000FF","330000","330033","330066","330099","3300CC",
"3300FF","660000","660033","660066","660099","6600CC","6600FF","990000","990033","990066","990099",
"9900CC","9900FF","CC0000","CC0033","CC0066","CC0099","CC00CC","CC00FF","FF0000","FF0033","FF0066",
"FF0099","FF00CC","FF00FF","003300","003333","003366","003399","0033CC","0033FF","333300","333333",
"333366","333399","3333CC","3333FF","663300","663333","663366","663399","6633CC","6633FF","993300",
"993333","993366","993399","9933CC","9933FF","CC3300","CC3333","CC3366","CC3399","CC33CC","CC33FF",
"FF3300","FF3333","FF3366","FF3399","FF33CC","FF33FF","006600","006633","006666","006699","0066CC",
"0066FF","336600","336633","336666","336699","3366CC","3366FF","666600","666633","666666","666699",
"6666CC","6666FF","996600","996633","996666","996699","9966CC","9966FF","CC6600","CC6633","CC6666",
"CC6699","CC66CC","CC66FF","FF6600","FF6633","FF6666","FF6699","FF66CC","FF66FF","009900","009933",
"009966","009999","0099CC","0099FF","339900","339933","339966","339999","3399CC","3399FF","669900",
"669933","669966","669999","6699CC","6699FF","999900","999933","999966","999999","9999CC","9999FF",
"CC9900","CC9933","CC9966","CC9999","CC99CC","CC99FF","FF9900","FF9933","FF9966","FF9999","FF99CC",
"FF99FF","00CC00","00CC33","00CC66","00CC99","00CCCC","00CCFF","33CC00","33CC33","33CC66","33CC99",
"33CCCC","33CCFF","66CC00","66CC33","66CC66","66CC99","66CCCC","66CCFF","99CC00","99CC33","99CC66",
"99CC99","99CCCC","99CCFF","CCCC00","CCCC33","CCCC66","CCCC99","CCCCCC","CCCCFF","FFCC00","FFCC33",
"FFCC66","FFCC99","FFCCCC","FFCCFF","00FF00","00FF33","00FF66","00FF99","00FFCC","00FFFF","33FF00",
"33FF33","33FF66","33FF99","33FFCC","33FFFF","66FF00","66FF33","66FF66","66FF99","66FFCC","66FFFF",
"99FF00","99FF33","99FF66","99FF99","99FFCC","99FFFF","CCFF00","CCFF33","CCFF66","CCFF99","CCFFCC",
"CCFFFF","FFFF00","FFFF33","FFFF66","FFFF99","FFFFCC","FFFFFF");
var category = {
cat1: {
value: "a", text: "cat1 blah blah", abbr: "c1", iconColor:
colors[1], iconStyle: mapIconStyles.letter.value, enabled: true
},
cat2: {
value: "cat2", text: "cat2 blah blah", abbr: "c2", iconColor:
colors[2], iconStyle: mapIconStyles.letter.value, enabled: true
},
cat3: {
value: "d", text: "cat3 blah blah", abbr: "c3", iconColor:
colors[3], iconStyle: mapIconStyles.letter.value, enabled: true
},
cat4: {
value: "j", text: " cat4 blah blah", abbr: "c4", iconColor:
colors[4], iconStyle: mapIconStyles.letter.value, enabled: true
},
cat5: {
value: "c", text: "cat5 blah blah", abbr: "c5", iconColor:
colors[5], iconStyle: mapIconStyles.letter.value, enabled: true
},
cat6: {
value: "ccc", text: "cat6 blah blah", abbr: "c6", iconColor:
colors[6], iconStyle: mapIconStyles.letter.value, enabled: true
},
cat7: {
value: "xxx", text: "cat7 blah blah", abbr: "c7", iconColor:
colors[7], iconStyle: mapIconStyles.letter.value, enabled: true
},
cat8: {
value: "ddd", text: "cat8 blah blah", abbr: "Mc8;", iconColor:
colors[8], iconStyle: mapIconStyles.letter.value, enabled: true
}
} //category
function iconImageFactory() {
var count = -1;
var cntStatus = -1;
var i=0; var j=0;
var sChr=""; var h;
this.newColorIcon = function(sChr, CategoryIdx) {
var sIconPath = "http://chart.apis.google.com/chart?";;
var sPushPinParm = "chld="
var sStyleParm = "chst="
var sIconStyle = "d_map_pin_letter"; //d_map_pin_letter,
d_map_xpin_letter d_bubble_text_small;
var myMapcategory = myMap.category[CategoryIdx];
sIconType = myMapcategory.iconStyle;
sIconColor = myMapcategory.iconColor;
//alert(myMapcategory.value);
var sIconURL = sIconPath + sStyleParm + sIconStyle + "&" +
sPushPinParm + sChr + "|" + sIconColor + "|000000";
return getImage(sIconURL, sChr, myMapcategory.value, CategoryIdx);
} //this.newColorIcon = function(sSymbol, sIconColor)
this.xnewColorIcon = function(sChr, sMapItcategory, sIconColor) {
var sIconPath = "http://chart.apis.google.com/chart?";;
var sPushPinParm = "chld="
var sStyleParm = "chst="
var sIconStyle = "d_map_pin_letter"; //d_map_pin_letter,
d_map_xpin_letter d_bubble_text_small;
for (CategoryIdx in myMap.category) {
if (sMapItcategory == myMap.category[CategoryIdx].value) {
sIconType = myMap.category[CategoryIdx].iconStyle;
sIconColor = myMap.category[CategoryIdx].iconColor;
//alert(myMap.category[i].value);
break;
//alert(myMap.category[j].text);
//alert(myMap.category[j].iconColor);
//alert(myMap.category[j].iconStyle);
}
}
var sIconURL = sIconPath + sStyleParm + sIconStyle + "&" +
sPushPinParm + sChr + "|" + sIconColor + "|000000";
return getImage(sIconURL, sChr, sMapItcategory, CategoryIdx);
} //this.newColorIcon = function(sSymbol, sIconColor)
this.newStatusIcon = function(sMapItType, sMapItcategory) {
//called like iconFactory.newStatusIcon("letter","Cat1") {
var sIconPath = "http://chart.apis.google.com/chart?";;
var sPushPinParm = "chld="
var sStyleParm = "chst="
var sIconStyle = "d_map_pin_letter"; //d_map_pin_letter,
d_map_xpin_letter d_bubble_text_small;
var sIconColor = "";
//http://code.google.com/p/google-maps-icons/ lots of fashionable
markers
//http://groups.google.com/group/google-chart-api/web/chart-types-
for-map-pins
//http: //chart.apis.google.com/chart?chst=d_map_pin_letter&chld=A|
FF0000|000000
//http://chart.apis.google.com/chart?
chst=d_map_xpin_letter&chld=pin_star|A|00FFFF|000000|FF0000
//you can rotate the svr prefix for parallel requests
//http: //0.chart.apis.google.com 1.chart.apis.google.com,
2.chart.apis.google.com
//sDirPath = myMap.Icons.DirPath
for (CategoryIdx in myMap.category) {
if (sMapItcategory == myMap.category[CategoryIdx].value) {
sIconType = myMap.category[CategoryIdx].iconStyle;
sIconColor = myMap.category[CategoryIdx].iconColor;
//alert(myMap.category[i].value);
break;
//alert(myMap.category[j].text);
//alert(myMap.category[j].iconColor);
//alert(myMap.category[j].iconStyle);
}
}
cntStatus += 1;
i = parseInt(cntStatus / 26);
switch (sMapItType) {
case case "letter":
j = cntStatus % 26;
if (i == 0)
sChr = String.fromCharCode(j + 65);
else
sChr = String.fromCharCode(64 + i) + String.fromCharCode(j +
65);
break;
case case "number":
if (cntStatus == 0) cntStatus += 1;
sChr = cntStatus;
default:
if (cntStatus == 0) cntStatus += 1; //we start cnt at -1 works
for letter not numbwers
sChr = cntStatus;
} // switch (sMapItType)
var sIconURL = sIconPath + sStyleParm + sIconStyle + "&" +
sPushPinParm + sChr + "|" + sIconColor + "|000000";
return getImage(sIconURL, sChr, sMapItCategory,null);
} //this.newOrderStatusIcon
}
function getImage(sIconURL, sChr, sIconCategory, CategoryIdx) {
var image = new google.maps.MarkerImage(sIconURL,
// This marker is 20 pixels wide by 32 pixels tall.
new google.maps.Size(20, 32),
// The origin for this image is 0,0.
new google.maps.Point(0, 0),
// The anchor for this image is the base of the pt at 0,32.
new google.maps.Point(0, 32));
//should these adhoc properties be name spaced possible google
collision
image.iconText = sChr;
image.iconUrl = sIconURL;
image.iconCategory = sIconCategory
return image;
}
On Sep 25, 5:42 am, Chad Killingsworth
<[email protected]> wrote:
> Did you check the
> documentation?http://code.google.com/apis/maps/documentation/javascript/overlays.ht...
>
> Chad Killingsworth
>
> On Sep 24, 1:50 pm, Raimonds Zarins <[email protected]> wrote:
>
>
>
> > Hello everyone.
>
> > I was digging trough internet and didn't find any way to add multiple
> > markers, each with a different style. Can someone give me a nice
> > snippet for that?
>
> > thanks, Raimonds.- Hide quoted text -
>
> - Show quoted text -
--
You received this message because you are subscribed to the Google Groups
"Google Maps JavaScript API v3" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-maps-js-api-v3?hl=en.
