Skip to content

Instantly share code, notes, and snippets.

@fatgy
Created March 10, 2011 04:54
Show Gist options
  • Save fatgy/863588 to your computer and use it in GitHub Desktop.
Save fatgy/863588 to your computer and use it in GitHub Desktop.
Esa's Google Maps API v3 experiments. Circle overlay as a marker.
// http://koti.mbnet.fi/ojalesa/boundsbox/makemarker_circle.htm
/**
* 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.center = options.center || options.position;
if (options.radius) var pushPin = new google.maps.Circle({map:map});
else var pushPin = new google.maps.Marker({map:map});
pushPin.setOptions(options);
google.maps.event.addListener(pushPin, "click", function(){
infoWindow.setOptions(options);
infoWindow.open(map, pushPin);
if(this.sidebarButton)this.sidebarButton.button.focus();
});
if (options.sidebarItem){
pushPin.sidebarButton = new SidebarItem(pushPin, options);
pushPin.sidebarButton.addIn("sidebar");
}
markerBounds.extend(options.position);
markerArray.push(pushPin);
pointsArray.push(options.center);
return pushPin;
}
google.maps.event.addListener(map, "click", function(){
infoWindow.close();
});
/**
* 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";
row.style.display = "block";
row.style.width = 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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment