Google MAP API Update to implement user-defined labeling coordinates _javascript tips

Source: Internet
Author: User
Tags map class
Demo Address: http://www.yaohaixiao.com/effects/google-map.html
Copy Code code as follows:

if (typeof googlemap = = ' undefined ') {
var googlemap = {};
}
(function () {
if (!document.getelementbyid ("Fgmap")) {
return false;
}
else {
Whether you can create a Google map control
var iscompatible = new gbrowseriscompatible ();
if (iscompatible) {
var Mapcontainer = document.getElementById ("Fgmap");
Create a GoogleMap Map 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 controls
var Scalecontrol = new Gscalecontrol ();
Map Class Selection control
var Maptypecontrol = new Gmaptypecontrol ();
Address-coordinate converters
var geocoder = new Gclientgeocoder ();
Last query Address
var lastaddress = ';
Last query coordinates
var lastpoint = null;
The last markup control created
var lastmarker = null;
Last coordinate point for user tag
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:
Constants: The default icon used by the G_default_icon tag.
The foreground image URL for the image String icon.
The shadow image URL for the shadow String icon.
Iconsize the pixel size of the gsize icon foreground image.
Shadowsize the pixel size of the gsize shadow image.
Iconanchor Gpoint The pixel coordinates of the anchor point on the map relative to the upper-left corner of the icon image.
Infowindowanchor gpoint Information window The anchor point on this icon is relative to the pixel coordinates of the upper-left corner of the icon image.
Printimage String Prints the URL of the foreground icon image used for the map. The size must be the same size as the main icon image provided by image.
Mozprintimage String The URL of the foreground icon image to use when printing the map with Firefox/mozilla. The size must be the same size as the main icon image provided by image.
Printshadow String The URL of the shadow image to use when printing the map. Because most browsers cannot print a PNG image, the image format should be GIF.
Transparent String The URL of the transparent foreground icon image to use when capturing a click event in Internet Explorer. This image should be the main icon image in the 24-bit PNG format with 1% opacity, but its size and shape are the same as the main icon.
ImageMap array of number represents an integer array of x/y coordinates of the image map that specifies the clickable portion of the icon image in the browser (not Internet Explorer).
The MaxHeight Integer specifies the distance (in pixels) of the visual vertical "rise" when the drag marker is dragged. (starting from 2.79)
Dragcrossimage String Specifies the URL of a cross cross image when dragging an icon. (starting from 2.79)
Dragcrosssize gsize Specifies the pixel size of the cross cross image when dragging an icon. (starting from 2.79)
Dragcrossanchor gpoint Specifies the pixel coordinate offset (relative to iconanchor) of the cross image when the icon is dragged. (starting from 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 ' Infowindowanchor ':
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 annotations
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/effects/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 latitude and Longitude: (' + custpoint.lat () + ', ' + custpoint.lng () + ') <br/> ';
Marktip = ' Do you want to set the new location to 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 Custom 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);
};

To cancel a user-defined coordinate operation
Googlemap.mapcancel = function () {
Map.removeoverlay (Lastmarker);
Map.closeinfowindow ();
};

Get coordinates by 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];
};

Callout coordinates and corresponding description information
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 a query address to a map
Googlemap.addaddresstomap = function (response) {
Map.clearoverlays ();
if (!response | | response. Status.code!= 200) {
Alert ("Sorry, we can't parse the latitude and longitude 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 query coordinates to a map
Googlemap.addpointtomap = function (CPoint) {
Map.clearoverlays ();
var marker = null, lat = cpoint[0], LNG = cpoint[1];
Googlemap.markermap (lat, LNG);
Lastpoint = [LAT,LNG];
};

Display marker to the map via address/coordinates
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 a map!") ");
}
}
})();

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.