Circle is a good alternative to be used instead of Marker in some cases. It is clickable and can be an anchor object for InfoWindow. You can set its color, opacity and dimensions. No images need to be loaded.

The main difference to Marker is that Circle scales with zoom. However it has a minimum size which is defined by strokeWeight. Try zooming out and in.

makeMarker() now creates a Circle instead of Marker if you give 'radius' option. The syntax has not changed:

The options are Marker or Circle options, InfoWindow options and sidebar item options combined in a single object.


The syntax to get a circle with info window and clickable sidebar label:
  radius: 50,
  position: new google.maps.LatLng(60.17295,24.93981),
  content: "Some text into the info bubble.",
  sidebarItem: "Label text"

Circle options

Circle radius in meters. By giving this option, you get Circle instead of Marker.
The stroke color in html hex style, like "#FFAA00".
The fill color string.
The width of circle outline in pixels (plain number). This defines the minimum dimension of the circle when zooming out.
Number 0...1
Number 0...1


See the source of this page or plain example with minimal html.

basic makeMarker() without sidebar

More experiments


Spread Firefox Affiliate Button Google Chrome

 * makeMarker() ver 0.3
 * creates Marker and InfoWindow on a Map() named 'map'
 * now creates alternatively a Circle if 'radius' option property is given
 * creates sidebar row in a DIV 'sidebar'
 * saves marker to markerArray and markerBounds
 * @param options object for Marker, InfoWindow and SidebarItem
 * @author Esa 2009, 2010
var infoWindow = new google.maps.InfoWindow();
var markerBounds = new google.maps.LatLngBounds();
var markerArray = [];
var pointsArray = []; // new in v0.3 For simple polyline construction.
function makeMarker(options){ = || options.position;
  if (options.radius) var pushPin = new google.maps.Circle({map:map});
  else  var pushPin = new google.maps.Marker({map:map});
  google.maps.event.addListener(pushPin, "click", function(){
    infoWindow.setOptions(options);, pushPin);
  if (options.sidebarItem){
    pushPin.sidebarButton = new SidebarItem(pushPin, options);
  return pushPin;

google.maps.event.addListener(map, "click", function(){

 * Creates a sidebar item 
 * @constructor
 * @author Esa 2009
 * @param marker
 * @param options object Supported properties: sidebarItem, sidebarItemClassName, sidebarItemWidth,
function SidebarItem(marker, opts){
  var tag = opts.sidebarItemType || "button";
  var row = document.createElement(tag);
  row.innerHTML = opts.sidebarItem;
  row.className = opts.sidebarItemClassName || "sidebar_item"; = "block"; = opts.sidebarItemWidth || "120px";
  row.onclick = function(){
    google.maps.event.trigger(marker, 'click');
  row.onmouseover = function(){
    google.maps.event.trigger(marker, 'mouseover');
  row.onmouseout = function(){
    google.maps.event.trigger(marker, 'mouseout');
  this.button = row;
// adds a sidebar item to a 
SidebarItem.prototype.addIn = function(block){ if(block && block.nodeType == 1)this.div = block; else this.div = document.getElementById(block) || document.getElementById("sidebar") || document.getElementsByTagName("body")[0]; this.div.appendChild(this.button); } // deletes a sidebar item SidebarItem.prototype.remove = function(){ if(!this.div) return false; this.div.removeChild(this.button); return true; } //Feel free to use/develop/molest the functions as you like.