XMaps Library - A Google Maps API Extension

XMaps Library - A Google Maps API Extension

XMaps Library
XMaps Documentation
Bugs
Help support XMaps
XMaps License
Busmonster Blog

The XMaps Library has not yet been released and may change between now and its official release. Look for an announcement on the Google Maps API discussion group for the official release.

The XMaps Library is not affiliated with the Google Maps API, despite the familiar-looking website layout.

The XMaps Library is an extension to the already terrific Google Maps API that adds more convenience to using the API and adds some cool new features, too! Now you can add filled polygons, put text along a polyline, create circles, add overlays faster, create custom icons and markers, and more!

The current pre-release of the library is xmaps.1c.js.

This library is intended to make it easier to do cool stuff with the Google Maps API. The library currently consists of one javascript file that you will need to link to with a script tag after the Google Maps API javascript and you are set.

To read all about the cool features included in the library, and to see some colorful examples, go to the documentation and read more!

// Create our map
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-102.568359, 42.875964), 13);

// Create our 'X' shape and register it.
var xShape = {
  iconAnchor: new GPoint(21, 20),
  infoWindowAnchor: new GPoint(21,20),
  shadow: false,
  points: [38,10,34,11, /* ... points describing the 'X' shape */ ]
};
XIcon.shapes['x'] = xShape;

// Create our 'X' icon.
var xStyle = {
  outlineColor: '#e11010',
  outlineWeight: 2,
  fillColor: '#e11010',
  fillOpacity: 1
};
var xIcon = new XIcon('x', xStyle);

// Create our 'X' marker and add it to the map.
var xHover = 'XMaps!';
var xInfoWindow = '<div style="width: 12em;">X marks the spot!</div>';
map.addOverlay(new XMarker(new GPoint(-122.330017,47.606395), xIcon, null, xHover, xInfoWindow));

// Create our patterned polyline.
var coords = [ -80.683594,38.685510, -84.375000,36.738884, /* ... coords describing the polyline path */ ];
var points = [];
for (var i = 0; i < coords.length; i += 2) {
  points.push(new GPoint(coords[i], coords[i + 1]));
}
var style = {
  color: '#e11010',
  pattern: [20, 10],
  opacity: 0.75,
  weight: 6
};
map.addOverlay(new XPolyline(points, style));