SnapShotControl Examples

To use this library, create a SnapShotControl object and add this control to the map with the GMap2.addControl() method:

var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(35.676148, 139.74479), 1);

// add control
var snapShotControl = new SnapShotControl();
map.addControl(snapShotControl);

Basic Example

The following example shows using the SnapShotControl in the most basic way.

var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(35.676148, 139.74479), 1);

// add control
var snapShotControl = new SnapShotControl();
map.addControl(snapShotControl);

// add maptype control
var menuMapTypeControl = new GMenuMapTypeControl();
map.addControl(menuMapTypeControl);

// add maptype
map.addMapType(G_PHYSICAL_MAP);

// add line
var latlngs = [];
latlngs.push(new GLatLng(35.676148, 139.74479));
latlngs.push(new GLatLng(25.48295117535531, 118.30078125));
latlngs.push(new GLatLng(-32.39851580247401, 135.17578125));
latlngs.push(new GLatLng(37.43997405227057, -121.9921875));
var line = new GPolyline(latlngs, "#FF0000", 10);
map.addOverlay(line);

// add markers
for (var i = 0; i < latlngs.length; i++) {
  var marker = new GMarker(latlngs[i]);
  map.addOverlay(marker);
}

View example (simple.html)

Advanced Example: Using Options

This example lets you play with the various options in the constructor, and see what the resulting map will look like.

View example (optionsWizard.html)

Using with Directions

A common use case for this control may be to let users print a map of directions. This example shows how to use the control to output a map of directions. Since directions polylines can be quite long, it uses the encoded polyline option to make sure that they fit within the URL length limit. This example also shows how to specify different HTML for the control button.

View example (directions.html)

Auto-Detect Marker Styles

The control will attempt to figure out the label, color, and size of a marker based on the filename of its icon. For example, if you use a naming scheme for your icon filename like "markerA.png", then the control will place an "A" in the static map. This behavior can be disabled with a boolean in the constructor.

View example (markerAutoDetect.html)

Specifying Marker Styles

Some icon filenames may not follow typical naming schemes, or perhaps your markers aren't as simple as red/A, and you want a different rendering in the static map. If you want to specify the style used for each marker when rendered in the static map, then you can communicate the styles with the control by setting properties on each marker object. The control will query to see if they exist, and use them if provided.

View example (markerStyles.html)

Specifying Poly Styles

Developers do specify styles for GPolyline/GPolygon objects in the API, but because the API does not allow accessors for those GPolyline/GPolygon styles, the developer must specifically communicate the styles. Just like with marker styles, the developer can specify styles by setting properties of each poly object. If the API exposes style accessors in the future, this may no longer be necessary.

View example (polyStyles.html)