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);
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); }
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)
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)
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)
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)
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.