Google Map uses custom marker to add text markers to the maps

Google map defaults to the Gmarker, you can only use the picture can not use text. But in practice, we inevitably need to mark text messages on the map. such as place names. The Google maps API allows us to implement custom Gmarker subclass Labelmarker by extending Gmarker.

1 google.maps.LabelMarker = function (latlng, options)
2 {
3 this.latlng = latlng;
4 This.labeltext = Options.labeltext | | '';
5 This.labelclass = Options.labelclass | | ' Writeb ';
6 This.labeloffset = Options.labeloffset | | New Google.maps.Size (8,-33);
7 Options.icon = Options.icon | | Gettexticon ();
8 Google.maps.Marker.apply (this, arguments);
9}
10
One google.maps.LabelMarker.prototype = new Google.maps.Marker (new Google.maps.LatLng (0, 0));
12
Google.maps.LabelMarker.prototype.initialize = function (map) {
Google.maps.Marker.prototype.initialize.call (this, map);
15
var label = document.createelement (' div ');
Label.classname = This.labelclass;
label.innerhtml = This.labeltext;
label.style.position = ' absolute ';
Label.style.width = ' 48px ';
Map.getpane (G_map_marker_pane). appendchild (label);
22
This.map = map;
This.label = label;
25}
26
Google.maps.LabelMarker.prototype.redraw = function (Force) {
Google.maps.Marker.prototype.redraw.call (this, map);
29
if (!force)
31 {
return;
33}
34
var point = This.map.fromLatLngToDivPixel (THIS.LATLNG);
var z = google.maps.Overlay.getZIndex (This.latlng.lat ());
37
This.label.style.left = (point.x + this.labelOffset.width) + ' px ';
This.label.style.top = (Point.y + this.labelOffset.height) + ' px ';
This.label.style.zIndex = z + 1;
41}
42
Google.maps.LabelMarker.prototype.remove = function () {
This.label.parentNode.removeChild (This.label);
This.label = null;
Google.maps.Marker.prototype.remove.call (this);
47}
48
function Gettexticon ()
50 {
Wuyi var icon = new Google.maps.Icon ();
Icon.image = "/js/map/img/mapts.gif";
Icon.iconsize = new Gsize (48, 40);
Icon.iconanchor = new Gpoint (0, 40);
Icon.infowindowanchor = new Gpoint (5, 1);
return icon;
57}

Code invoked on the page:

1　var　marker　=　new　google.maps.LabelMarker(map.getCenter(),　{
2　　　　　labelText:'我在这'
3　　　　　});
4
5　map.addOverlay(marker);

We will now show our custom Gmarker logo on the map.