“, buttonZoomingHTML: “
“, buttonStartingStyle: { width: ’27px’, height: ’19px’ }, buttonStyle: { background: ‘transparent’ }, buttonZoomingStyle: { background: ‘transparent’}, overlayRemoveTime: 100 }; gmap.addControl(new DragZoomControl(boxStyleOpts, otherOpts, {}), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(69, 27))); // function LocControl() {} LocControl.prototype = new GControl(); LocControl.prototype.initialize = function(map) { var div = document.createElement(‘div’); var html = “
n n”; $(div).update(html); map.getContainer().appendChild(div); return div; } LocControl.prototype.getDefaultPosition = function() { return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(96, 27)); } gmap.addControl(new LocControl()); } // // Gooogle map API V3, van li, 20130312 function addExtraControls_v3() { if (!gmap) return; var boxStyleOpts = { opacity: .2, border: “1px solid royalblue” }; var otherOpts = { buttonHTML: “ “, buttonZoomingHTML: “ “, buttonStartingStyle: { width: ’27px’, height: ’19px’ }, buttonStyle: { background: ‘transparent’ }, buttonZoomingStyle: { background: ‘transparent’}, overlayRemoveTime: 100 }; //zoom //dragzoom, 20130318, van li var homeControl = new DragZoomControl(boxStyleOpts, otherOpts, {}); gmap.setDragZoomObjectV3(homeControl); var homeControlDivA = homeControl.initialize(gmap); homeControlDivA.index = 20; //location search function LocControl(pHomeControlDiv) { var html = “ n n”; $(pHomeControlDiv).update(html); } var homeControlDiv = document.createElement(‘div’); var homeControl = new LocControl(homeControlDiv); homeControlDiv.index = 1; var controlsDivaB = document.createElement(‘div’); //var controlsDivaEmpty = document.createElement(‘div’); //homeControlDivA.setAttribute(“style”,”position:relative;left:-10px;top:35px;”); controlsDivaB.appendChild(homeControlDivA); //homeControlDiv.setAttribute(“style”,”position:relative;left:17px;top:16px;”); controlsDivaB.appendChild(homeControlDiv); //gmap.controls[google.maps.ControlPosition.TOP_LEFT].push(controlsDivaB); //van li, 20130401, bug var mapDiv = gmap.getDiv(); //bug 62288, van li, 20130403 //homeControlDivA.setAttribute(“style”,”position:relative;left:88px;top:0px;z-index:300;”); //homeControlDiv.setAttribute(“style”,”position:relative;left:88px;top:0px;z-index:100;”); mapDiv.appendChild(controlsDivaB); } function clickTab(tabname, update_content) { if (current_tabname != tabname) { if ($(current_tabname)) { $(current_tabname).removeClassName(‘tab_active’); $(current_tabname).addClassName(‘tab’); } if ($(tabname)) { $(tabname).removeClassName(‘tab’); $(tabname).addClassName(‘tab_active’); } current_tabname = tabname; } if (update_content == null || update_content) updateTabContent(tabname, data.pageno[tabname][current_cat] || 1); } function changeTabImage(tabname, update_content) { if (current_tabname != tabname) { if ($(current_tabname)) { $(current_tabname).removeClassName(‘TAB_ELEMENT_ACTIVE’); $(current_tabname).addClassName(‘TAB_ELEMENT’); } if ($(tabname)) { $(tabname).removeClassName(‘TAB_ELEMENT’); $(tabname).addClassName(‘TAB_ELEMENT_ACTIVE’); } current_tabname = tabname; } // changeTabIcon(tabname); if (data.pageno[tabname] == null) { data.pageno[tabname] = {} data.pageno[tabname][current_cat] = 1; } if (update_content == null || update_content) updateTabContent(tabname, data.pageno[tabname][current_cat] || 1); } function selectCat(cat, update_content) { var curr_cat = $(“cat_” + current_cat); var sel_cat = $(‘cat_’ + cat); removeCatClassNames(curr_cat); curr_cat.addClassName(‘cat_normal’); current_cat = cat; if (update_content == null || update_content) updateTabContent(current_tabname, data.pageno[current_tabname][cat] || 1); removeCatClassNames(sel_cat); sel_cat.addClassName(‘cat_selected’); removeCatClassNames(‘cat_more’); if (cat_menu.indexOf(cat) >= 0) { $(‘cat_more’).addClassName(‘cat_selected’); dropdowncontent.hidediv(‘cat_more_rel’); } else { $(‘cat_more’).addClassName(‘cat_normal’); } } function changeGlobal(is_global) { current_global = is_global; data.pageno[current_tabname][current_cat] = 1; updateTabContent(current_tabname, data.pageno[current_tabname][current_cat] || 1); if (typeof loadRankingList == ‘function’) loadRankingList(); } function grayThumbList(level) { /* if (data.tracks == null) return; for (var i = 0; i < data.tracks.length; i++) if ($('thumb' + i)) $('thumb' + i).setOpacity(level); */ $('trip_frame').setOpacity(level); } function updateTabContent(tabname, pageno) { if (!tabname) tabname = current_tabname ? current_tabname : 'tab_featured' if (!current_cat) current_cat = 'all'; current_tabname = tabname; pageno = pageno || 1; if (data.pageno == null) data.pageno = {}; if (data.pageno[tabname] == null) data.pageno[tabname] = {}; data.pageno[tabname][current_cat] = pageno; var mbr = ''; if (loc_bounds && gmap) { mbr = loc_bounds.getSouthWest().lat() + ' ' + loc_bounds.getSouthWest().lng() + ' ' + loc_bounds.getNorthEast().lat() + ' ' + loc_bounds.getNorthEast().lng(); } showLoadingLabel(); grayThumbList(0.64); new Ajax.Updater('tab_content', base_url + '/trips/ajax/tab_content/' + tabname + '/' + pageno, { asynchronous: true, evalScripts: true, parameters: { show: '', newrule: 0, cat: current_cat, mbr: mbr, is_global: current_global ? 1 : 0}, onComplete: function(transport, json) { hideLoadingLabel(); if (json.loc_mbr_str) $('loclink').update("(" + json.loc_mbr_str + ")"); } }); } function onTabContentUpdated() { // Gooogle map API V3, van li, 20130312 if (gmap_v3 != 1) { updateMapMarkers(); } else { updateMapMarkers_v3(); } // hideLoadingLabel(); for (var i = 0; i < data.tracks.length; i++) { var track = data.tracks[i]; $('thumb_img' + i).title = track.thumb_tip_html; } grayThumbList(1.0); } function updateMapMarkers() { if (gmap == null) return; gmap.clearOverlays(); data.selected_marker = -1; // Create larger marker var marker = new GMarker(new GLatLng(0, 0), {draggable: false, icon: data.marker_icon_sel, zIndexProcess: function() { return 0; }}); gmap.addOverlay(marker); marker.hide(); data.marker_sel = marker; if (data.tracks.length == 0) return; var mbr = []; for (var i = 0; i < data.tracks.length; i++) { var track = data.tracks[i]; track.index = i; /* extendsRect(mbr, track.start[0], track.start[1]); extendsRect(mbr, track.stop[0], track.stop[1]); extendsRect(mbr, track.center[0], track.center[1]); */ extendsRect(mbr, track.spot[0], track.spot[1]); var marker = createTrackMarker(track); gmap.addOverlay(marker); track.border_color = frame_color_normal; track.border_color_sel = frame_color_focused; } fixMBR(mbr); var bounds = new GLatLngBounds(new GLatLng(mbr[0], mbr[1]), new GLatLng(mbr[2], mbr[3])); var center = new GLatLng((mbr[0] + mbr[2]) / 2, (mbr[1] + mbr[3]) / 2); var h = Math.abs(mbr[0] - mbr[2]) * 0.1; bounds.extend(new GLatLng(mbr[0] + (mbr[2] mbr[0] ? h : -h), mbr[1])); var level = gmap.getBoundsZoomLevel(bounds); level = level > 7 ? 7 : level; gmap.setCenter(center, level); gmap.savePosition() ; if (loc_bounds) { lat1 = loc_bounds.getSouthWest().lat(); lng1 = loc_bounds.getSouthWest().lng(); lat2 = loc_bounds.getNorthEast().lat(); lng2 = loc_bounds.getNorthEast().lng(); var lines = [new GLatLng(lat1, lng1), new GLatLng(lat1, lng2), new GLatLng(lat2, lng2), new GLatLng(lat2, lng1), new GLatLng(lat1, lng1)]; var polygon = new GPolygon(lines, “#0000FF”, 1, 0.4, “#FFFFFF”, 0.1); gmap.addOverlay(polygon); } } function updateMapMarkers_v3() { if (gmap == null) return; data.selected_marker = -1; // Create larger marker var marker = new google.maps.Marker({ position: new google.maps.LatLng(0, 0), draggable: false, icon: data.marker_icon_sel, map: gmap, zIndexProcess: function() { return 0; } }); marker.setVisible(false); data.marker_sel = marker; if (data.tracks.length == 0) return; var mbr = []; for (var i = 0; i < data.tracks.length; i++) { var track = data.tracks[i]; track.index = i; extendsRect(mbr, track.spot[0], track.spot[1]); var marker = createTrackMarker_v3(track); track.border_color = frame_color_normal; track.border_color_sel = frame_color_focused; } fixMBR(mbr); var bounds = new google.maps.LatLngBounds(new google.maps.LatLng(mbr[0], mbr[1]), new google.maps.LatLng(mbr[2], mbr[3])); for (var i = 0; i 7) gmap.setZoom(7); if (loc_bounds) { lat1 = loc_bounds.getSouthWest().lat(); lng1 = loc_bounds.getSouthWest().lng(); lat2 = loc_bounds.getNorthEast().lat(); lng2 = loc_bounds.getNorthEast().lng(); var lines = [new google.maps.LatLng(lat1, lng1), new google.maps.LatLng(lat1, lng2), new google.maps.LatLng(lat2, lng2), new google.maps.LatLng(lat2, lng1), new google.maps.LatLng(lat1, lng1)]; polygon = new google.maps.Polygon({ paths: lines, strokeColor: "#0000FF", strokeWeight: 1, strokeOpacity: 0.4, fillColor: "#FFFFFF", fillOpacity: 0.1, map: gmap }); } } function createTrackMarker(track) { var marker_opt = {draggable: false}; marker_opt.icon = data.marker_icon; var marker = new GMarker(new GLatLng(track.spot[0], track.spot[1]), marker_opt); track.marker = marker; track.info_window = makeTrackInfoWindow(track); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(track.info_window); setThumbSelected(track.index); }); GEvent.addListener(marker, "infowindowclose", function() { }); return marker; } function createTrackMarker_v3(track) { var marker = new google.maps.Marker({ position: new google.maps.LatLng(track.spot[0], track.spot[1]), icon: data.marker_icon, map: gmap, draggable: false }); track.marker = marker; track.info_window = makeTrackInfoWindow(track); google.maps.event.addListener(marker, "click", function() { if (gInfoWindow !== null) gInfoWindow.close(); gInfoWindow = new google.maps.InfoWindow({ content: track.info_window }); gInfoWindow.open(gmap,track.marker); setThumbSelected(track.index); }); google.maps.event.addListener(marker, "closeclick", function() { }); return marker; } function makeTrackInfoWindow(track) { var table_width = 380; // 392; var tsize = 176; var html = "", image = "", desc = ""; image = "" + " ” + “ ” + “]]> “; desc = “” + “
” + track.userinfo_html + “
” + “” + “
” + track.desc + “
” + “”; html += “
” + “
” + image + “
” + “
” + desc + “
” + “
“; return html; } var frame_color_normal = “#CCCCCC”; var frame_color_focused = “red”; var frame_color_selected = “magenta”; function setThumbBorder(index, focused) { var thumb = $(‘thumb’ + index); var tframe = $(‘tframe’ + index); var is_sel = data.selected_marker == index ? true : false; if (focused) { thumb.style.borderColor = data.tracks[index].border_color_selected || ‘red’; tframe.style.borderColor = thumb.style.borderColor; // thumb.style.borderWidth = “2px”; // thumb.style.padding = “0”; } else { // thumb.style.borderColor = data.tracks[index].border_color || frame_color_normal; thumb.style.borderColor = data.tracks[index].border_color || frame_color_normal; tframe.style.borderColor = is_sel ? data.tracks[index].border_color : ‘white’; // thumb.style.borderWidth = is_sel ? “2px” : “1px”; // thumb.style.padding = is_sel ? “0” : “1px”; } } function onThumbMouseOver(index) { onThumbMouseEvent(index, ‘over’); } function onThumbMouseOut(index) { onThumbMouseEvent(index, ‘out’); } function onThumbMouseEvent(index, action) { if (isLoadingLabelVisible()) return; if (!data.tracks) return; var thumb = $(‘thumb’ + index); var track = data.tracks[index]; if (!thumb || !track) return; // Gooogle map API V3, van li, 20130312 if (gmap_v3 != 1) { if (action == ‘over’) { setThumbBorder(index, true); if (data.marker_sel) { data.marker_sel.setLatLng(track.marker.getLatLng()); data.marker_sel.show(); } if (track.marker) track.marker.hide(); if (data.selected_marker == index) thumb.style.cursor = “pointer”; } else if (action == ‘out’) { setThumbBorder(index, false); if (data.marker_sel) data.marker_sel.hide(); if (track.marker) track.marker.show(); thumb.style.cursor = “default”; } } else { if (action == ‘over’) { setThumbBorder(index, true); if (data.marker_sel) { //data.marker_sel.setLatLng(track.marker.getLatLng()); data.marker_sel.setPosition(track.marker.getPosition()); //data.marker_sel.show(); data.marker_sel.setVisible(true); } //if (track.marker) track.marker.hide(); if (track.marker) track.marker.setVisible(false); if (data.selected_marker == index) thumb.style.cursor = “pointer”; } else if (action == ‘out’) { setThumbBorder(index, false); //if (data.marker_sel) data.marker_sel.hide(); if (data.marker_sel) data.marker_sel.setVisible(false); //if (track.marker) track.marker.show(); if (track.marker) track.marker.setVisible(true); thumb.style.cursor = “default”; } } } function onThumbClick(index) { var thumb = $(‘thumb’ + index); var track = data.tracks[index]; if (!thumb || !track) return; if (data.selected_marker == index) { window.open(track.url, “trip”); // location = track.url; } else { setThumbSelected(index); if (track.marker){ // Gooogle map API V3, van li, 20130312 if (gmap_v3 != 1) { track.marker.openInfoWindowHtml(track.info_window); } else { if (gInfoWindow !== null) gInfoWindow.close(); gInfoWindow = new google.maps.InfoWindow({ content: track.info_window }); gInfoWindow.open(gmap,track.marker); } } thumb.style.cursor = “pointer”; onThumbMouseOver(index); } } function setThumbSelected(index) { if (data.selected_marker >= 0 && data.tracks[data.selected_marker]) { data.tracks[data.selected_marker].border_color = frame_color_normal; selected_marker = data.selected_marker; data.selected_marker = -1; onThumbMouseOut(selected_marker); } if (data.tracks[index]) { data.tracks[index].border_color = frame_color_selected; data.selected_marker = index; onThumbMouseOut(index); } } dropdowncontent.init(“cat_link1”, “right-bottom”, 1, ‘mouseover’); //dropdowncontent.hidedivmouseout[0]=false; function newMenu(event) { dropdowncontent.show($(‘cat_link1’), $(‘cat_more_rel’), event); } function deleteMenu(event) { dropdowncontent.hide($(‘cat_more_rel’), $(‘cat_more_rel’), event); } function removeCatClassNames(id) { $(id).removeClassName(‘cat_normal’); $(id).removeClassName(‘cat_selected’); $(id).removeClassName(‘cat_hover’); } function catMouseOver(id) { removeCatClassNames(id); $(id).addClassName(‘cat_hover’); } function catMouseOut(id, arg) { removeCatClassNames(id); var is_sel = false; if ((arg == 1 && id == (“cat_” + current_cat)) || (arg == 1 && id == ‘cat_more’ && cat_menu.indexOf(current_cat) >= 0) || (arg == 2 && id.slice(4) == current_tabname.slice(4)) ) is_sel = true; $(id).addClassName(is_sel ? ‘cat_selected’ : ‘cat_normal’); } function enableLocSearch(enabled) { var loc_mode = loc_bounds ? true : false; if (enabled) { if (!gmap) return; var sw = gmap.getBounds().getSouthWest(); var ne = gmap.getBounds().getNorthEast(); var lat1 = sw.lat(), lat2 = ne.lat(); var lng1 = sw.lng(), lng2 = ne.lng(); var is_cross = lng2 180) { var delta = (w – 178) / 2; lng1 = fixLng(lng1 + delta); lng2 = fixLng(lng2 – delta); var lat = gmap.getCenter().lat(); lat1 += h * delta / w / 2; lat2 -= h * delta / w / 2; } else { lat1 += h / 10; lat2 -= h / 10; lng1 += w / 10; lng2 -= w / 10; } loc_bounds = new GLatLngBounds(new GLatLng(lat1, lng1), new GLatLng(lat2, lng2)); $(‘trip_frame’).style.borderColor = ‘darkorange’; $(‘trip_list’).style.borderColor = ‘darkorange’; $(‘loctab’).show(); $(‘loclink’).update(“”); prev_global = current_global; current_global = true; if (!loc_mode) { selectCat(‘all’, false); changeTabImage(‘tab_latest’, false); } } else { loc_bounds = null; $(‘trip_frame’).style.borderColor = ‘#CCCCCC’; $(‘trip_list’).style.borderColor = ‘#FFFFFF’; $(‘loctab’).hide(); $(‘loclink’).update(“”); if (prev_global != null) current_global = prev_global; } updateTabContent(current_tabname, 1); } // Gooogle map API V3, van li, 20130312 function enableLocSearch_V3(enabled) { var loc_mode = loc_bounds ? true : false; if (enabled) { if (!gmap) return; var sw = gmap.getBounds().getSouthWest(); var ne = gmap.getBounds().getNorthEast(); var lat1 = sw.lat(), lat2 = ne.lat(); var lng1 = sw.lng(), lng2 = ne.lng(); var is_cross = lng2 180) { var delta = (w – 178) / 2; lng1 = fixLng(lng1 + delta); lng2 = fixLng(lng2 – delta); var lat = gmap.getCenter().lat(); lat1 += h * delta / w / 2; lat2 -= h * delta / w / 2; } else { lat1 += h / 10; lat2 -= h / 10; lng1 += w / 10; lng2 -= w / 10; } loc_bounds = new google.maps.LatLngBounds(new google.maps.LatLng(lat1, lng1), new google.maps.LatLng(lat2, lng2)); $(‘trip_frame’).style.borderColor = ‘darkorange’; $(‘trip_list’).style.borderColor = ‘darkorange’; $(‘loctab’).show(); $(‘loclink’).update(“”); prev_global = current_global; current_global = true; if (!loc_mode) { selectCat(‘all’, false); changeTabImage(‘tab_latest’, false); } } else { loc_bounds = null; $(‘trip_frame’).style.borderColor = ‘#CCCCCC’; $(‘trip_list’).style.borderColor = ‘#FFFFFF’; $(‘loctab’).hide(); $(‘loclink’).update(“”); if (prev_global != null) current_global = prev_global; } updateTabContent(current_tabname, 1); } function panToLoc() { if (loc_bounds && gmap) { var level = gmap.getBoundsZoomLevel(loc_bounds); gmap.setCenter(loc_bounds.getCenter(), level); } }
Check this out: 1. Select and zoom 2. Search this area
Source