MapIconMaker for Google Maps API v3

mapiconmaker.js

/**
 * @name MapIconMaker
 * @version 2.0b
 * @author Pamela Fox, Marc Climent
 * @copyright (c) 2008 Pamela Fox, 2010 Marc Climent
 * @fileoverview This gives you static functions for creating dynamically
 *     sized and colored marker icons using the Charts API marker output.
 */

/*
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License. 
 */

/**
 * @name MarkerIconOptions
 * @class This class represents optional arguments to {@link createMarkerIcon}, 
 *     {@link createFlatIcon}, or {@link createLabeledMarkerIcon}. Each of the
 *     functions use a subset of these arguments. See the function descriptions
 *     for the list of supported options.
 * @property {Number} [width=32] Specifies, in pixels, the width of the icon.
 *     The width may include some blank space on the side, depending on the
 *     height of the icon, as the icon will scale its shape proportionately.
 * @property {Number} [height=32] Specifies, in pixels, the height of the icon.
 * @property {String} [primaryColor="#ff0000"] Specifies, as a hexadecimal
 *     string, the color used for the majority of the icon body.
 * @property {String} [cornerColor="#ffffff"] Specifies, as a hexadecimal
 *     string, the color used for the top corner of the icon. If you'd like the
 *     icon to have a consistent color, make the this the same as the
 *     {@link primaryColor}.
 * @property {String} [strokeColor="#000000"] Specifies, as a hexadecimal
 *     string, the color used for the outside line (stroke) of the icon.
 * @property {String} [shadowColor="#000000"] Specifies, as a hexadecimal
 *     string, the color used for the shadow of the icon. 
 * @property {String} [label=""] Specifies a character or string to display
 *     inside the body of the icon. Generally, one or two characters looks best.
 * @property {String} [labelColor="#000000"] Specifies, as a hexadecimal 
 *     string, the color used for the label text.
 * @property {Number} [labelSize=0] Specifies, in pixels, the size of the label
 *     text. If set to 0, the text auto-sizes to fit the icon body.
 * @property {String} [shape="circle"] Specifies shape of the icon. Current
 *     options are "circle" for a circle or "roundrect" for a rounded rectangle.
 * @property {Boolean} [addStar = false] Specifies whether to add a star to the
 *     edge of the icon.
 * @property {String} [starPrimaryColor="#FFFF00"] Specifies, as a hexadecimal
 *     string, the color used for the star body.
 * @property {String} [starStrokeColor="#0000FF"] Specifies, as a hexadecimal
 *     string, the color used for the outside line (stroke) of the star.
 */

/**
 * This namespace contains functions that you can use to easily create
 *     dynamically sized, colored, and labeled icons.
 * @namespace
 */
var MapIconMaker = {};

/**
 * Creates an icon based on the specified options in the 
 *   {@link MarkerIconOptions} argument.
 *   Supported options are: width, height, primaryColor, 
 *   strokeColor, and cornerColor.
 * @param {MarkerIconOptions} [opts]
 * @return {GIcon}
 */
MapIconMaker.createMarkerIcon = function (opts) {
    var width = opts.width || 32;
    var height = opts.height || 32;
    var primaryColor = opts.primaryColor || "#ff0000";
    var strokeColor = opts.strokeColor || "#000000";
    var cornerColor = opts.cornerColor || "#ffffff";

    var baseUrl = "http://chart.apis.google.com/chart?cht=mm";
    var iconUrl = baseUrl + "&chs=" + width + "x" + height +
        "&chco=" + cornerColor.replace("#", "") + "," +
        primaryColor.replace("#", "") + "," +
        strokeColor.replace("#", "") + "&ext=.png";

    var icon = new google.maps.MarkerImage();
    var shadow = new google.maps.MarkerImage();

    icon.url = iconUrl;
    icon.anchor = new google.maps.Point(width / 2, height);
    icon.size = new google.maps.Size(width, height);

    shadow.url = 'http://maps.gstatic.com/mapfiles/shadow50.png';
    shadow.anchor = new google.maps.Point(width / 2, height);
    shadow.size = new google.maps.Size(Math.floor(width * 1.6), height);
    shadow.scaledSize = new google.maps.Size(Math.floor(width * 1.6), height);

    var coords = [
      width / 2, height,
      (7 / 16) * width, (5 / 8) * height,
      (5 / 16) * width, (7 / 16) * height,
      (7 / 32) * width, (5 / 16) * height,
      (5 / 16) * width, (1 / 8) * height,
      (1 / 2) * width, 0,
      (11 / 16) * width, (1 / 8) * height,
      (25 / 32) * width, (5 / 16) * height,
      (11 / 16) * width, (7 / 16) * height,
      (9 / 16) * width, (5 / 8) * height
    ];
    for (var i = 0; i < coords.length; i++) {
        coords[i] = parseInt(coords[i]);
    }

    var iconShape = { type: "poly", coords: coords };

    // return icon;
    return {
        icon: icon,
        shadow: shadow,
        shape: iconShape
    };
};


/**
 * Creates a flat icon based on the specified options in the 
 *     {@link MarkerIconOptions} argument.
 *     Supported options are: width, height, primaryColor,
 *     shadowColor, label, labelColor, labelSize, and shape..
 * @param {MarkerIconOptions} [opts]
 * @return {GIcon}
 */
MapIconMaker.createFlatIcon = function (opts) {
    var width = opts.width || 32;
    var height = opts.height || 32;
    var primaryColor = opts.primaryColor || "#ff0000";
    var shadowColor = opts.shadowColor || "#000000";
    var label = MapIconMaker.escapeUserText_(opts.label) || "";
    var labelColor = opts.labelColor || "#000000";
    var labelSize = opts.labelSize || 0;
    var shape = opts.shape || "circle";
    var shapeCode = (shape === "circle") ? "it" : "itr";

    var baseUrl = "http://chart.apis.google.com/chart?cht=" + shapeCode;
    var iconUrl = baseUrl + "&chs=" + width + "x" + height +
        "&chco=" + primaryColor.replace("#", "") + "," +
        shadowColor.replace("#", "") + "ff,ffffff01" +
        "&chl=" + label + "&chx=" + labelColor.replace("#", "") +
        "," + labelSize;

    var icon = new google.maps.MarkerImage();

    icon.url = iconUrl + "&chf=bg,s,00000000" + "&ext=.png";
    icon.size = new google.maps.Size(width, height);
    icon.anchor = new google.maps.Point(width / 2, height / 2);

    var iconShape;

    if (shapeCode === "itr") {
        iconShape = { type: "poly", coords: [0, 0, width, 0, width, height, 0, height] };
    } else {
        var polyNumSides = 8;
        var polySideLength = 360 / polyNumSides;
        var polyRadius = Math.min(width, height) / 2;
        var coords = [];
        for (var a = 0; a < (polyNumSides + 1) ; a++) {
            var aRad = polySideLength * a * (Math.PI / 180);
            var pixelX = polyRadius + polyRadius * Math.cos(aRad);
            var pixelY = polyRadius + polyRadius * Math.sin(aRad);
            coords.push(parseInt(pixelX), parseInt(pixelY));
        }
        iconShape = { type: "poly", coords: coords };
    }

    // return icon;
    return {
        icon: icon,
        shape: iconShape
    };
};


/**
 * Creates a labeled marker icon based on the specified options in the 
 *     {@link MarkerIconOptions} argument.
 *     Supported options are: primaryColor, strokeColor, 
 *     starPrimaryColor, starStrokeColor, label, labelColor, and addStar.
 * @param {MarkerIconOptions} [opts]
 * @return {GIcon}
 */
MapIconMaker.createLabeledMarkerIcon = function (opts) {
    var primaryColor = opts.primaryColor || "#DA7187";
    var strokeColor = opts.strokeColor || "#000000";
    var starPrimaryColor = opts.starPrimaryColor || "#FFFF00";
    var starStrokeColor = opts.starStrokeColor || "#0000FF";
    var label = MapIconMaker.escapeUserText_(opts.label) || "";
    var labelColor = opts.labelColor || "#000000";
    var addStar = opts.addStar || false;

    var pinProgram = (addStar) ? "pin_star" : "pin";
    var baseUrl = "http://chart.apis.google.com/chart?cht=d&chdp=mapsapi&chl=";
    var iconUrl = baseUrl + pinProgram + "'i\\" + "'[" + label +
        "'-2'f\\" + "hv'a\\]" + "h\\]o\\" +
        primaryColor.replace("#", "") + "'fC\\" +
        labelColor.replace("#", "") + "'tC\\" +
        strokeColor.replace("#", "") + "'eC\\";
    if (addStar) {
        iconUrl += starPrimaryColor.replace("#", "") + "'1C\\" +
            starStrokeColor.replace("#", "") + "'0C\\";
    }
    iconUrl += "Lauto'f\\";

    var icon = new google.maps.MarkerImage();
    var shadow = new google.maps.MarkerImage();

    var width = (addStar) ? 23 : 21;
    var height = (addStar) ? 39 : 34;

    icon.url = iconUrl + "&ext=.png";
    icon.size = new google.maps.Size(width, height);

    shadow.url = 'http://maps.gstatic.com/mapfiles/shadow50.png';
    shadow.anchor = new google.maps.Point(width / 2, height);
    shadow.size = new google.maps.Size(Math.floor(width * 1.6), height);
    shadow.scaledSize = new google.maps.Size(Math.floor(width * 1.6), height);

    return {
        icon: icon,
        shadow: shadow
    };
};


/**
 * Utility function for doing special chart API escaping first,
 *  and then typical URL escaping. Must be applied to user-supplied text.
 * @private
 */
MapIconMaker.escapeUserText_ = function (text) {
    if (text === undefined) {
        return null;
    }
    text = text.replace(/@/, "@@");
    text = text.replace(/\\/, "@\\");
    text = text.replace(/'/, "@'");
    text = text.replace(/\[/, "@[");
    text = text.replace(/\]/, "@]");
    return encodeURIComponent(text);
};

FWIW - It would have been nice if you had posted a sample USAGE script for using this function. It still would be.

You had a wizard for v1 (v2 map api) that could be used/cloned/modified. This was discussed by Pamela Fox in the maps api blog here: http://googlemapsapi.blogspot.com/2008/03/iconfactory-10-easy-way-to-make-your.html

I was unable to get this new code to work using the v3 map api and ended up rolling code my own using the icons that I had previously created in with tie wizard (and saved as .png).