Google Maps API Tutorial -2
At last article I talked about Google Map basic concepts. At map you can show different control options to pan/zoom map, showing driving directions, map types etc.
Generally used controls are -
GLargeMapControl - a large pan/zoom control used on Google Maps. Appears in the top left corner of the map by default.
GSmallMapControl - a smaller pan/zoom control used on Google Maps. Appears in the top left corner of the map by default.
-
-
var map = new GMap2(document.getElementById("map"));
-
map.addControl(new GSmallMapControl());
-
These controls can be positioned on map by adding an optional second parameter to method GControlPosition.
-
-
var map = new GMap2(document.getElementById"map"));
-
var mapTypeControl = new GMapTypeControl();
-
var topRight = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10,10));
-
map.addControl(mapTypeControl, topRight);
-
You can even modify markup of these standard controls but thats not the scope of our article :). More information on google map controls can be found at http://code.google.com/apis/maps/documentation/controls.html
At last article I mentioned how to add markers to the map. Interestingly we can change icons for the markup. Instead of default 
marker you can use same fancy icons like 
or 
. This is also helpful to show different icons for different type of markers. E.g. if you are showing locations of users, subscribers, agents, resellers etc. at your site, you can use different icon representing each of this user type on map.
-
-
// Create a base icon for all of our markers that specifies the
-
// shadow, icon dimensions, etc.
-
var baseIcon = new GIcon(G_DEFAULT_ICON);
-
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
-
baseIcon.iconSize = new GSize(20, 34);
-
baseIcon.shadowSize = new GSize(37, 34);
-
baseIcon.iconAnchor = new GPoint(9, 34);
-
baseIcon.infoWindowAnchor = new GPoint(9, 2);
-
-
// Create icon for this point using our icon class
-
var letteredIcon = new GIcon(baseIcon);
-
letteredIcon.image = "http://www.google.com/mapfiles/markerA.png";
-
-
// Set up our GMarkerOptions object
-
markerOptions = { icon:letteredIcon };
-
var marker = new GMarker(point, markerOptions);
-
