// V2 // 2. Remove "Save this location" // 3. Add "Go to this location" (on YOUR Gmap. The link originally provided was linked to maps.google.com) // 4. Error message when Local Search shows No result. // 5. If you enter location directly, go to tere on your map, and cancel search. // Currently, detectable formats are following five: // "35.12345,-74.12345", // "N35.12345,W74.12345", // "35.12.34.56,-74.12.34.56"(As DD.MM.SS.SS) // "N35.12.34.56,W74.12.34.56"(As DD.MM.SS.SS) // Or, LocaPoint(TM) location pointer code // // I hope someone modify this control better and cooler. :-) // // // Usage: // You need to include Uds API and Maps API // // // // You also need to include or cut&paste THIS file on your javascript source // // // After you initialize Gmap2, Initialize Local Search Control as following. // map = new GMap2(d.getElementById("map")); // map.setCenter(new GLatLng(34.669782,135.47915),18); // // map.IntegratedGLocalSearchControl = new IntegratedGLocalSearchControl(); // map.addControl(map.IntegratedGLocalSearchControl); // // // // // /////////////////////////////////////////////////////////////////////////////// //IntegratedGLocalSearchControl /////////////////////////////////////////////////////////////////////////////// //Configuration var offsetFromTop = 40; //global state for AJAX API search var gLocalSearch; var gSelectedResults = []; var gCurrentResults = []; var gSearchForm; // Create our "tiny" marker icon var gSmallIcon = new GIcon(); gSmallIcon.image = "http://labs.google.com/ridefinder/images/mm_20_yellow.png"; gSmallIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png"; gSmallIcon.iconSize = new GSize(12, 20); gSmallIcon.shadowSize = new GSize(22, 20); gSmallIcon.iconAnchor = new GPoint(6, 20); gSmallIcon.infoWindowAnchor = new GPoint(5, 1); function IntegratedGLocalSearchControl() { } IntegratedGLocalSearchControl.prototype = new GControl(true, true); IntegratedGLocalSearchControl.prototype.initialize = function(map) { this.map_ = map; //container this.base = document.createElement("div"); //switchOn this.switchOnDiv = document.createElement("div"); this.switchOnDiv.style.visibility="visible"; var s = this.switchOnDiv.style; s.position = "relative"; s.top = "0px"; s.border = "1px solid #000000"; s.padding = "0px"; s.rightMargin = "7px"; s.backgroundColor = "#FFFFFF"; s.color = "#000000"; s.cursor = "pointer"; this.switchOnDiv.font = "small Tahoma"; this.switchOnDiv.appendChild(document.createTextNode("<< Local Search")); GEvent.addDomListener(this.switchOnDiv, "click", function() { map.IntegratedGLocalSearchControl.show(); }); this.base.appendChild(this.switchOnDiv); //Local Search this.locsearchDiv = document.createElement("div"); this.locsearchDiv.style.visibility="hidden"; s = this.locsearchDiv.style; s.position = "relative"; s.top = "-25px"; s.left = "0px"; s.width = "212px"; s.height = "1px"; s.border = "4px solid #C0C0C0"; s.padding = "5px"; s.backgroundColor = "#FFFFFF"; s.color = "#000000"; var search = document.createElement("div"); search.id = "search"; search.style.border = "1px solid #C0C0C0" search.style.padding ="2px"; var switchOffDiv = document.createElement("div"); switchOffDiv.style.font = "small Tahoma"; switchOffDiv.style.cursor = "pointer"; switchOffDiv.appendChild(document.createTextNode("Google Local Search >> close")); GEvent.addDomListener(switchOffDiv, "click", function() { map.IntegratedGLocalSearchControl.hide(); }); search.appendChild(switchOffDiv); var searchformDiv = document.createElement("div"); searchformDiv.id = "searchform"; search.appendChild(searchformDiv); this.locsearchDiv.appendChild(search); this.resultDiv = document.createElement("div"); this.resultDiv.id = "results"; this.resultDiv.style.height = "1px"; this.resultDiv.style.overflow = "auto"; var searchwellDiv = document.createElement("div"); searchwellDiv.id = "searchwell"; this.resultDiv.appendChild(searchwellDiv); this.locsearchDiv.appendChild(this.resultDiv); this.base.appendChild(this.locsearchDiv); //map.IntegratedGLocalSearchControl.resize(); this.map_.getContainer().appendChild(this.base); //Attach to resize if (window.addEventListener) { window.addEventListener("resize", map.IntegratedGLocalSearchControl.resize, false); }else if (window.attachEvent) { window.attachEvent("on"+"resize", map.IntegratedGLocalSearchControl.resize); } initAJAXSearch(); return(this.base); } IntegratedGLocalSearchControl.prototype.getDefaultPosition = function() { return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(0, offsetFromTop)); } IntegratedGLocalSearchControl.prototype.resize = function() { var size = map.getSize(); map.IntegratedGLocalSearchControl.locsearchDiv.style.height = (size.height - 60 - offsetFromTop ) + "px"; map.IntegratedGLocalSearchControl.resultDiv.style.height = (size.height - 120 - offsetFromTop) + "px"; } IntegratedGLocalSearchControl.prototype.show = function() { this.locsearchDiv.style.visibility="visible"; this.switchOnDiv.style.visibility="hidden"; map.IntegratedGLocalSearchControl.resize(); } IntegratedGLocalSearchControl.prototype.hide = function() { this.locsearchDiv.style.visibility="hidden"; this.locsearchDiv.style.height = "1px"; this.switchOnDiv.style.visibility="visible"; } /////////////////////////////////////////////////////////////////////////////// //Geocoder with GoogleSearch API /////////////////////////////////////////////////////////////////////////////// // Set up the map and the local searcher. function initAJAXSearch() { gSearchForm = new GSearchForm(false, document.getElementById("searchform")); gSearchForm.setOnSubmitCallback(null, CaptureForm); gSearchForm.input.size = "25"; //gSearchForm.input.setAttribute("title", "Enter Address/Keyword/LocaPoint/etc."); //gSearchForm.input.focus(); //Auto Select if (gSearchForm.input.addEventListener) { gSearchForm.input.addEventListener("focus", gSearchForm.input.select, false); }else if (gSearchForm.input.attachEvent) { gSearchForm.input.attachEvent("on"+"focus", gSearchForm.input.select); } // Initialize the local searcher gLocalSearch = new GlocalSearch(); gLocalSearch.setCenterPoint(map); gLocalSearch.setSearchCompleteCallback(null, OnLocalSearch); } // Called when Local Search results are returned, we clear the old // results and load the new ones. function OnLocalSearch() { if (!gLocalSearch.results) return; var searchWell = document.getElementById("searchwell"); if (gLocalSearch.results.length==0){ searchWell.innerHTML = "No Result..."; return; } // Clear the map and the old search well searchWell.innerHTML = ""; for (var i = 0; i < gCurrentResults.length; i++) { if (!gCurrentResults[i].selected()) { map.removeOverlay(gCurrentResults[i].marker()); } } gCurrentResults = []; for (var i = 0; i < gLocalSearch.results.length; i++) { gCurrentResults.push(new LocalResult(gLocalSearch.results[i])); } var attribution = gLocalSearch.getAttribution(); if (attribution) { document.getElementById("searchwell").appendChild(attribution); } // move the map to the first result var first = gLocalSearch.results[0]; map.panTo(new GLatLng(parseFloat(first.lat), parseFloat(first.lng))); } // Cancel the form submission, executing an AJAX Search API search. function CaptureForm(searchForm) { //Regular Expressions to detect location data var re_LP =/^([A-Z]{2}\d\.){3}[A-Z]{2}\d$/.exec(searchForm.input.value); var re_DMS =/^([-\+NnSs]?)(\d{1,2})[^0-9A-Za-z](\d{1,2})[^0-9A-Za-z](\d{1,2}\.?\d\d*),\s*([-\+EeWw]?)(\d{1,3})[^0-9A-Za-z](\d{1,2})[^0-9A-Za-z](\d{1,2}\.?\d\d*)$/.exec(searchForm.input.value); var re_DD =/^([-\+NnSs]?)(\d{1,2}\.\d\d*){1},\s*([-\+EeWw]?)(\d{1,3}\.\d\d*){1}$/.exec(searchForm.input.value); if(re_LP!=null){ //LocaPoint var location = LocaPoint2LatLon(searchForm.input.value); map.setCenter(new GLatLng(location.latitude, location.longitude)); //gLocalSearch.setCenterPoint(map); return false; }else if(re_DMS!=null && re_DMS.length==9){//DD*MM*SS.SSS var dotPosSS; dotPosSS = re_DMS[4].indexOf(".",0); var latd = re_DMS[2] -0 + (re_DMS[3]-0)/60 + (dotPosSS==-1?((re_DMS[4].subStr(0,dotPosSS)+"."+re_DMS[4].subStr(dotPosSS+1,len(re_DMS[4])-dotPosSS)))-0:(re_DMS[4]-0))/3600; dotPosSS = re_DMS[8].indexOf(".",0); var lond = re_DMS[6] -0 + (re_DMS[7]-0)/60 + (dotPosSS==-1?((re_DMS[8].subStr(0,dotPosSS)+"."+re_DMS[8].subStr(dotPosSS+1,len(re_DMS[8])-dotPosSS)))-0:(re_DMS[8]-0))/3600; if(re_DMS[1]=="" || re_DMS[1]=="+" || re_DMS[1]=="N" || re_DMS[1]=="n"){ }else if(re_DMS[1]=="-" || re_DMS[1]=="S" || re_DMS[1]=="s"){ latd*=(-1); } if(re_DMS[5]=="" || re_DMS[5]=="+" || re_DMS[5]=="E" || re_DMS[5]=="e"){ }else if(re_DMS[5]=="-" || re_DMS[5]=="W" || re_DMS[5]=="w"){ lond*=(-1); } map.setCenter(new GLatLng(latd, lond)); //gLocalSearch.setCenterPoint(map); return false; }else if(re_DD!=null && re_DD.length==5){//DD.DDDD var latdd = re_DD[2]; var londd = re_DD[4]; if(re_DD[1]=="" || re_DD[1]=="+" || re_DD[1]=="N" || re_DD[1]=="n"){ }else if(re_DD[1]=="-" || re_DD[1]=="S" || re_DD[1]=="s"){ latdd*=(-1); } if(re_DD[3]=="" || re_DD[3]=="+" || re_DD[3]=="E" || re_DD[3]=="e"){ }else if(re_DD[3]=="-" || re_DD[3]=="W" || re_DD[3]=="w"){ londd*=(-1); } map.setCenter(new GLatLng(latdd, londd)); //gLocalSearch.setCenterPoint(map); return false; }else{//else Go search gLocalSearch.execute(searchForm.input.value); return false; } } // A class representing a single Local Search result returned by the // Google AJAX Search API. function LocalResult(result) { this.result_ = result; this.resultNode_ = this.unselectedHtml(); document.getElementById("searchwell").appendChild(this.resultNode_); map.addOverlay(this.marker(gSmallIcon)); } // Returns the map marker for this result, creating it with the given // icon if it has not already been created. LocalResult.prototype.marker = function(opt_icon) { if (this.marker_) return this.marker_; var marker = new GMarker(new GLatLng(parseFloat(this.result_.lat), parseFloat(this.result_.lng)), opt_icon); GEvent.bind(marker, "click", this, function() { marker.openInfoWindow(this.selected() ? this.selectedHtml() : this.unselectedHtml()); }); this.marker_ = marker; return marker; } // "Saves" this result if it has not already been saved LocalResult.prototype.select = function() { if (!this.selected()) { this.selected_ = true; // Remove the old marker and add the new marker map.removeOverlay(this.marker()); this.marker_ = null; map.addOverlay(this.marker(G_DEFAULT_ICON)); // Add our result to the saved set document.getElementById("selected").appendChild(this.selectedHtml()); // Remove the old search result from the search well this.resultNode_.parentNode.removeChild(this.resultNode_); } } // Returns the HTML we display for a result before it has been "saved" LocalResult.prototype.unselectedHtml = function() { var container = document.createElement("div"); container.className = "unselected"; container.style.paddingLeft ="18px"; container.style.paddingTop = "1px"; container.style.backgroundImage = "url('http://labs.google.com/ridefinder/images/mm_20_yellow.png')"; container.style.backgroundRepeat = "no-repeat"; container.style.backgroundPosition = "top left"; container.appendChild(this.result_.html.cloneNode(true)); //var saveDiv = document.createElement("div"); //saveDiv.className = "select"; //saveDiv.innerHTML = "Save this location"; //GEvent.bindDom(saveDiv, "click", this, function() { // map.closeInfoWindow(); // this.select(); // gSelectedResults.push(this); //}); //container.appendChild(saveDiv); this.result_.locapoDiv = document.createElement("div"); this.result_.locapoDiv.className = "select"; this.result_.locapoDiv.style.marginBottom = "1em"; this.result_.locapoDiv.style.cursor = "pointer"; this.result_.locapoDiv.style.textDecoration = "underline"; this.result_.locapoDiv.style.coor = "7777CC"; var locapoint=LatLon2LocaPoint(this.result_.lat, this.result_.lng); var latlonstr = " (" + FormLatLonStr(this.result_.lat, this.result_.lng) + ")"; this.result_.locapoDiv.innerHTML = "Go to this location"; this.result_.locapoDiv.setAttribute("title", "LocaPoint:" + locapoint + latlonstr); GEvent.bindDom(this.result_.locapoDiv, "click", this, function() { map.closeInfoWindow(); map.setCenter(new GLatLng(this.result_.lat, this.result_.lng)); }); container.appendChild(this.result_.locapoDiv); return container; } // Returns the HTML we display for a result after it has been "saved" LocalResult.prototype.selectedHtml = function() { return this.result_.html.cloneNode(true); } // Returns true if this result is currently "saved" LocalResult.prototype.selected = function() { return this.selected_; } /////////////////////////////////////////////////////////////////////////////// // Following are LocaPoint functions. // If you remove following, make sure not to use them in this file. /////////////////////////////////////////////////////////////////////////////// //LocaPoint2LatLon /////////////////////////////////////////////////////////////////////////////// function LocaPoint2LatLon(locapoint){ var location = new Object(); location.latitude =( ((locapoint.charCodeAt(0)-65)*1757600 +(locapoint.charCodeAt(1)-65)*67600 +(locapoint.charCodeAt(2)-48)*6760 +(locapoint.charCodeAt(8)-65)*260 +(locapoint.charCodeAt(9)-65)*10 +(locapoint.charCodeAt(10)-48)) *180/45697600-90).toFixed(6); location.longitude = ( ((locapoint.charCodeAt(4)-65)*1757600 +(locapoint.charCodeAt(5)-65)*67600 +(locapoint.charCodeAt(6)-48)*6760 +(locapoint.charCodeAt(12)-65)*260 +(locapoint.charCodeAt(13)-65)*10 +(locapoint.charCodeAt(14)-48) ) *360/45697600-180).toFixed(6); return(location); } /////////////////////////////////////////////////////////////////////////////// //LatLon2LocaPoint /////////////////////////////////////////////////////////////////////////////// function LatLon2LocaPoint(lat, lon){ var latstep=Math.floor(((lat-(-90))*45697600/180)); var lngstep=Math.floor(((lon-(-180))*45697600/360)); var locapoint=String.fromCharCode( Math.floor(latstep/1757600%26)+65, Math.floor(latstep/67600%26)+65, Math.floor(latstep/6760%10)+48, 46, Math.floor(lngstep/1757600%26)+65, Math.floor(lngstep/67600%26)+65, Math.floor(lngstep/6760%10)+48, 46, Math.floor(latstep/260%26)+65, Math.floor(latstep/10%26)+65, Math.floor(latstep%10)+48, 46, Math.floor(lngstep/260%26)+65, Math.floor(lngstep/10%26)+65, Math.floor(lngstep%10)+48 ); return(locapoint); } /////////////////////////////////////////////////////////////////////////////// //FormLatLonStr /////////////////////////////////////////////////////////////////////////////// function FormLatLonStr(lat, lon){ var latstr =lat>=0?"N":"S"; var lonstr =lon>=0?"E":"W"; lat = Math.abs(lat); lon = Math.abs(lon); lat = "000" + lat.toFixed(6); lon = "000" + lon.toFixed(6); latstr += lat.substr(lat.length - 9); lonstr += lon.substr(lon.length - 10); return(latstr + "," + lonstr); } //]]>