Google Map API update allows users to customize annotation coordinates

Demo address: http://www.yaohaixiao.com/effects/google-map.html
Copy codeThe Code is as follows:
If (typeof GoogleMap = 'undefined '){
Var GoogleMap = {};
}
(Function (){
If (! Document. getElementById ("fgmap ")){
Return false;
}
Else {
// Can I create a Google Map control?
Var isCompatible = new GBrowserIsCompatible ();
If (isCompatible ){
Var mapContainer = document. getElementById ("fgmap ");
// Create a GoogleMAP instance
Var map = new GMap2 (mapContainer );
// Map default scale level
Var perviewLevel = 14;
// Large map zoom Level Control
Var largeMapControl = new GLargeMapControl ();
// Map Thumbnail Control
Var overviewMapControl = new GOverviewMapControl ();
// Scale control
Var scaleControl = new GScaleControl ();
// Map class selection Control
Var mapTypeControl = new GMapTypeControl ();
// Address-coordinate Converter
Var geocoder = new GClientGeocoder ();
// The Last query address
Var lastAddress = '';
// Coordinates of the last Query
Var lastPoint = null;
// The Last tag Control created
Var lastMarker = null;
// The Last coordinate point marked by the user
Var cusLastPoint = null;

GoogleMap. mapMsg = [];

// Create a map
GoogleMap. Map = function (lat, lng ){
Var point = new GLatLng (lat, lng );
Map. addMapType (G_PHYSICAL_MAP );
Map. setCenter (point, perviewLevel );

Map. enableDoubleClickZoom ();
Map. enableScrollWheelZoom ();
Map. enableContinuousZoom ();

Map. addControl (largeMapControl)
Map. addControl (overviewMapControl );
Map. addControl (mapTypeControl );
Map. addControl (scaleControl );
};

// Create a tag
GoogleMap. createMarker = function (latlng, markerOptions ){
Var marker = markerOptions? New GMarker (latlng, markerOptions): new GMarker (latlng );
LastMarker = marker;
Return marker;
};

// Custom tag options
/* ===================================================== ========================================================== ========================================================== ========================================================== ======================================
Parameter description:
Constant: G_DEFAULT_ICON indicates the default icon used.
The foreground image URL of the image String icon.
Shadow String icon shadow image URL.
IconSize GSize indicates the pixel size of the foreground image.
ShadowSize GSize the pixel size of the Shadow image.
IconAnchor GPoint the position of the anchor icon on the map relative to the pixel coordinate in the upper left corner of the icon image.
The infographic wanchor GPoint information window displays the coordinates of the anchor point on the icon relative to the pixel coordinate in the upper left corner of the icon image.
PrintImage String specifies the URL of the foreground icon image used to print the map. The size must be the same as the size of the master icon image provided by the image.
The URL of the foreground icon image used when the mozPrintImage String prints a map using Firefox/Mozilla. The size must be the same as the size of the master icon image provided by the image.
PrintShadow String specifies the URL of the Shadow image used to print the map. Most browsers cannot print PNG images, so the image format should be GIF.
The URL of the transparent foreground icon image used when a click event is captured in Internet Explorer. This image should be a 24-bit PNG master icon image with 1% opacity, but its size and shape are the same as that of the master icon.
ImageMap Array of Number indicates an integer Array of the x/y coordinates of the image map. It is used to specify the clickable part of the icon image in the browser (non-Internet Explorer.
MaxHeight Integer specifies the visual vertical "Rising" distance (in pixels) when dragging a tag ). (Since 2.79)
DragCrossImage String specifies the URL of the cross image when the icon is dragged. (Since 2.79)
DragCrossSize GSize specifies the pixel size of the cross image when the icon is dragged. (Since 2.79)
DragCrossAnchor GPoint specifies the pixel coordinate offset (relative to iconAnchor) of the cross image when the icon is dragged ). (Since 2.79)
========================================================== ========================================================== ========================================================== ========================================================== ======================================= */
GoogleMap. setCustomIcon = function (IconOptions ){
Var myIcon = new GIcon (G_DEFAULT_ICON), I;
For (I in IconOptions ){
Switch (I ){
Case 'iconsize ':
Case 'shadowsize ':
Case 'dragcrosssize ':
MyIcon [I] = new GSize (IconOptions [I] [0], IconOptions [I] [1]);
Break;
Case 'iconanchor ':
Case 'infographic wanchor ':
Case 'infoshadowanchor ':
Case 'dragcrossanchor ':
MyIcon. iconAnchor = new GPoint (IconOptions [I] [0], IconOptions [I] [1]);
Break;
Default:
MyIcon [I] = IconOptions [I];
Break;
}

}
Return myIcon;
};

// User-Defined Annotation
GoogleMap. customMarkPoint = function (){
Var marker = null;
Var markPoint = cusLastPoint? New GLatLng (cusLastPoint [0], cusLastPoint [1]): new GLatLng (lastPoint [0], lastPoint [1]);
Var markOptions = {
Icon: GoogleMap. setCustomIcon ({
Image: 'http: // www.yaohaixiao.com/~ts/img/icon13.png'
}),
Draggable: true
};

Marker = GoogleMap. createMarker (markPoint, markOptions );
GEvent. addListener (marker, "dragstart", function (){
Map. closeInfoWindow ();
});
GEvent. addListener (marker, "dragend", function (){
Var custPoint = marker. getPoint ();
Var markTip = '<div class = "fgmap_markerMsg" id = "cusMarkTip"> ';
MarkTip + = 'MarkTip + = '<div id = "mapTips"> <p> current longitude and latitude: (' + custPoint. lat () + ',' + custPoint. lng () + ') <br/> ';
MarkTip + = 'Do you want to set the new location as the default location for this merchant? </P> ';
MarkTip + = '<div class = "MDB" style = "text-align: center;"> <button id = "MapOK "';
Marker. openInfoWindowHtml (markTip );
});
Map. addOverlay (marker );
};

// Save User-Defined coordinates
GoogleMap. MapOk = function (){
Var savedPoint = lastMarker. getPoint ();
Var lat = savedPoint. lat (), lng = savedPoint. lng ();
Var markTip = document. getElementById ('cusmarktip ');
MarkTip. innerHTML = 'If (timer ){
ClearTimeout (timer );
}
Var timer = setTimeout (function (){
Map. clearOverlays ();
Var marker = GoogleMap. createMarker (savedPoint );
If (GoogleMap. mapMsg ){
GEvent. addListener (marker, "click", function (){
Var msg = '<span class = "fgmap_markerMsg">', j;
Msg + = 'For (var j = 1; j <GoogleMap. mapMsg [1]. length; j ++ ){
Msg + = GoogleMap. mapMsg [1] [j] + "<br/> ";
}
Msg + = "</span> ";
Map. openInfoWindowHtml (savedPoint, msg );
});
}
Map. addOverlay (marker );
Map. setCenter (savedPoint );
CusLastPoint = [lat, lng];
},2000 );
};

// Cancel the custom coordinate operation
GoogleMap. MapCancel = function (){
Map. removeOverlay (lastMarker );
Map. closeInfoWindow ();
};

// Obtain coordinates through the address
GoogleMap. getAddresslatlng = function (response ){
Var place = response. Placemark [0];
Var point = new GLatLng (place. Point. coordinates [1], place. Point. coordinates [0]);
Return [place. Point. coordinates [1], place. Point. coordinates [0], point, place];
};

// Mark coordinates and corresponding instructions
GoogleMap. MarkerMap = function (lat, lng ){
Var marker = null;
Var point = new GLatLng (lat, lng );
GoogleMap. Map (lat, lng );

Marker = this. createMarker (point );
If (GoogleMap. mapMsg ){
GEvent. addListener (marker, "click", function (){
Var msg = '<span class = "fgmap_markerMsg">', j;
Msg + = 'For (var j = 1; j <GoogleMap. mapMsg [1]. length; j ++ ){
Msg + = GoogleMap. mapMsg [1] [j] + "<br/> ";
}
Msg + = "</span> ";
Map. openInfoWindowHtml (point, msg );
});
}
Map. addOverlay (marker );
};

// Add the query address to the map
GoogleMap. addAddressToMap = function (response ){
Map. clearOverlays ();
If (! Response | response. Status. code! = 200 ){
Alert ("Sorry, we cannot parse the latitude and longitude coordinates of this address! ");
}
Else {
Var marker = null, point = GoogleMap. getAddresslatlng (response );
Var address = point [3]. address, lat = point [0], lng = point [1];
GoogleMap. mapMsg = (GoogleMap. mapMsg! = ''& (LastAddress = GoogleMap. mapMsg [0])? GoogleMap. mapMsg: [address, [point [3]. address, ('longitude: '+ point [1]), ('latitude:' + point [0])];
GoogleMap. MarkerMap (lat, lng );
LastPoint = [lat, lng];
}
};

// Add the query coordinates to the map
GoogleMap. addPointToMap = function (cPoint ){
Map. clearOverlays ();
Var marker = null, lat = cPoint [0], lng = cPoint [1];
GoogleMap. MarkerMap (lat, lng );
LastPoint = [lat, lng];
};

// Display the Marker to the map through the address/Coordinate
GoogleMap. showLocation = function (cPoint ){
If (typeof cPoint = 'string '){
Geocoder. getLocations (cPoint, this. addAddressToMap );
LastAddress = cPoint;
}
Else {
GoogleMap. addPointToMap (cPoint );
}
};

GEvent. addListener (window, 'unload', GUnload );
}
Else {
Alert ("sorry, your browser does not support creating maps! ");
}
}
})();