Google map tagging (with search function)

First introduce the JS file of Google Map

<SCRIPT type = "text/JavaScript" src = "http://ditu.google.com/maps? File = API & amp; V = 3 "> </SCRIPT>

The following areSource code

String. prototype. trim = function () {return this. replace (/(^ \ s *) | (\ s * $)/g, "") ;}; string. prototype. empty = function () {return this. trim () = "" ;}; string. prototype. format = function () {var ARGs = arguments; return this. replace (/\ {(\ D +) \}/g, function (M, I) {return ARGs [I] ;}; array. prototype. indexof = function (v) {for (VAR I = 0; I <this. length; I ++) {If (V = This [I]) {return I ;}} return- 1 ;}; var GoogleMap = function (OBJ) {This. latitude = obj. latitude | 116.407413; this. longtitude = obj. longtitude || 39.904214; this. width = obj. width | 400; this. height = obj. height | 300; this. html = obj. HTML | NULL; this. allowsearch = obj. search | false; this. map = NULL; this. markers = []; this. container = obj. container | NULL; this. scrollwheelzoom = obj. scrollwheelzoom | false; this. large Mapcontrol = obj. largemapcontrol | false; this. maptypecontrol = obj. maptypecontrol | false; this. overviewmap = obj. overviewmap | false; this. OBJ = NULL; this. width = This. width <= 400? 400: This. width; this. Height = This. Height <= 300? 300: This. height; this. id = obj. id | 'Google {0 }'. format (math. ceil (math. random () * 10000); this. geocoder = NULL; this. init () ;}; GoogleMap. prototype = {addevent: function (O, a, B) {o. attachevent? O. attachevent ('on' + A, function () {B. call (o)}): O. addeventlistener (a, B, false)}, loadmap: function () {var $ = this; if ($. map) return; If (! $. OBJ. innerhtml. empty () return; var o = document. createelement ('div '); o.style.css text = 'width: {0} PX; Height: {1} PX; Border: 1px solid # a5bfdd '. format ($. width, $. height); $. OBJ. appendchild (o); $. map = new GMAP (o); var mycenter = new gpoint ($. latitude, $. longtitude); $. map. centerandzoom (mycenter, 8); // you can create a widget with four-direction translation, zoom-in, and zoom-out buttons. If ($. largemapcontrol) $. Map. addcontrol (New glargemapcontrol (); // create a control with a button to switch the map type. Gmaptypecontrol if ($. maptypecontrol) $. map. addcontrol (New gmenumaptypecontrol (); If ($. overviewmap) $. map. addcontrol (New goverviewmapcontrol (); // you can specify if ($. scrollwheelzoom) $. map. enablescrollwheelzoom () ;}, icon: function () {var c = new gicon (); C. image = "http://maps.google.com/mapfiles/ MS/micons/red-dot.png"; C. shadow = "http://maps.google.com/mapfiles/ MS/micons/msmarker.shadow.png"; C. I Consize = new gsize (32, 32); C. shadowsize = new gsize (37, 34); C. iconanchor = new gpoint (9, 34); C. infographic wanchor = new gpoint (9, 2); C. infoshadowanchor = new gpoint (18, 25); Return C ;}, createmarker: function (HTML, show, latitude, longtitude) {var $ = This; var ICO = $. icon (); var point = new gpoint (longtitude, latitude); var marker = new gmarker (point, ico); gevent. addlistener (Marker, "click ", Function () {marker. openinfowindowhtml (HTML) ;}); $. map. addoverlay (Marker); If (show) marker. openinfowindowhtml (HTML); Return marker;}, init: function () {var $ = this; if (! $. Container) {alert ('container does not exist! '); Return;} var o = Document. getelementbyid ($. Container); If (! O) {alert ('container does not exist! '); Return;} $. OBJ = O; $. iconor = GoogleMap. icon = $. icon (); $. loadmap (); $. createmarker ($. HTML, true, $. latitude, $. longtitude); O. parentnode. style. width = $. width + 'px '; if ($. allowsearch) {$. geocoder = new gclientgeocoder (); var S = document. createelement ('P'); O. appendchild (s); var K = document. createelement ('input'); K. setattribute ('type', 'text'); k.style.css text = 'border: 1px solid # a5bf Dd; width: {0} PX; Height: 16px; margin-top: 10px '. format ($. width-50); var d = document. createelement ('input'); D. setattribute ('type', 'click'); d.style.css text = 'border: 1px solid # a5bfdd; width: 40px; float: Right; Height: 20px; margin-top: 10px; cursor: pointer; Background: # b1d5ff '; D. value = 'search'; var r = document. createelement ('P'); r.style.css text = 'margin-top: 10px '; R. setattribute ('id', 'search {0 }'. forma T ($. ID); O. appendchild (r); S. appendchild (d); S. appendchild (k); $. result = r; D. onclick = function () {If (K. value. empty () {alert ('enter the keyword! '); Return;} $. geocoder. getlocations (K. value. Trim (), function (result) {If (result. Status. Code! = G_geo_success) return; var icon = new gicon (g_default_icon); var Lat, LNG, point, address, marker; For (VAR I = 0; I <result. placemark. length; I ++) {lat = result. placemark [I]. point. coordinates [1]; // lat lng = result. placemark [I]. point. coordinates [0]; // LNG address = result. placemark [I]. address; // address point = new glatlng (Lat, LNG); point = point. tostring (). replace ('(',''). replace (')', ''); R. innerhtml = (address + "<small>" + point. tostring () + "</small> <br/>"); var mycenter = new gpoint (Lat, LNG); $. map. centerandzoom (mycenter, 8); $. createmarker (address. replace (/,/g, '<br/>'), false, Lat, LNG); var lati = document. getelementbyid ('latitude '); var lont = document. getelementbyid ('longtude'); If (lati) lati. value = Lat; If (lont) lont. value = LNG ;}})};}}}

Usage

 
VaR map = new GoogleMap ({// map width: 600, // map Height: 500, // latitude: 42.648486, // longitude longtitude:-71.134868, // whether Search: True, // map supports scroll wheel scrollwheelzoom: True, // The control largemapcontrol with the four-direction translation, zoom-in, and zoom-out slider: true, // The control maptypecontrol: true with the button for switching the map type, // the lower right corner of the map overviewmap: True, // The Marked HTML: 'phillips Academy Andover ', // map container ID container: 'xx '});
 

Multiple tags

 
Map. createmarker ('North reading', false, 42.5750833,-71.0854325); map. createmarker ('xxx reading', false, 42.5750833,-71.2854325 );
 

Html

 
Longitude: <input id = "latitude" type = "text"/> latitude: <input id = "longtitude" type = "text"/> <Div id = "XX"> </div>
 

This is a special requirement in my project. It is not generic. Welcome to make a brick.

This article is original, although it is SpamCode, Please indicate the source when reprinting. Thank you

Click my demo