@trip - Geek Initus : Blog

@trip


“, buttonZoomingHTML: “Cancel selection“, 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 = “nSearch this arean”; $(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: “Select and zoom“, buttonZoomingHTML: “Cancel selection“, 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 = “nSearch this arean”; $(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

Leave a Comment

Your email address will not be published. Required fields are marked *

We are Fun Loving Professionals, who like to do great stuff with computers and technology. We love implementing what we know and we love learning all that we don’t know.

Information

About Us

Contact

©2024 .blog.geekinitus All Rights Reserved