tag:blogger.com,1999:blog-27768804806318544892011-10-24T14:48:01.659-07:00Charliehttp://www.blogger.com/profile/01428756858272529400noreply@blogger.comBlogger21100tag:blogger.com,1999:blog-2776880480631854489.post-65022536246845027712011-10-18T22:15:00.000-07:002011-10-18T22:18:31.735-07:00<p>I wish I'd saved it before hitting "send"..</p><p>I just penned an incredibly passionate letter to <a href="http://mountainproject.com/">Mountain Project</a> urging them to make all of their data available via a public API. For anybody who's wondering, an API is basically a standard interface that software developers can program against, effectively making the implementing platform extensible by anybody with a keyboard and an idea. It's what all the cool companies are doing these days. Google Maps has an API that allows you to create your own maps (see my previous post). <a href="http://api.eventful.com/">Eventful</a> offers an API for searching concerts and venues around the world. And there are countless other noteworthy examples, a lot of which can be found <a href="http://www.programmableweb.com/apis">here</a></p><p>The point is, the times they are a changin'. It used to be the case that the general public was dependent upon whoever had the data for a decent site design, a clever presentation and, at the base of it all, the right to access the data freely. Nowadays, the most successful companies aren't the ones who keep a tight lid on this precious resource, they're the ones who give it away. Take Facebook as the prime example. Yeah the site itself is very well done; yes it sparked the social media revolution; heck, it even sparked some <strong>real</strong> revolutions! But it also made itself extensible, via a thoughtfully structured API, from day one. This is what allowed Mafia Wars and Farmville to exist. It's what allowed countless plug-ins to come and go, businesses to form and prosper, ideas to get out of someone's head and onto the web. It basically spawned a sister universe right next to, and intimately interconnected with, the Facebook cosmos itself. This is how <strong>culture</strong> happens. And culture is the world's most valuable currency.</p><p>Basically, I hope Mountain Project sees it the way I do. And I'm pretty sure they will. They're essentially a climbing data repository that's been fleshed out, revised and solidified by the climbing community itself. The free exchange of data is part of who they are. It allowed them to exist in the first place. I can't remember the exact phrasing I used (I promise I'll post the original email if I can get it from them) but I basically told them <i>I'd pay them</i> to let me work on this. That's how huge I think this is. And it makes sense right? It's at the inner-most cross section of all the things I care most about: rock climbing, cutting-edge programming, creating something beautiful that can grow organically into something even more complex and fascinating than I could ever possibly imagine with 100% of my brain. It's all there, waiting for someone to make it happen. And all I can do now is wait..</p><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/2776880480631854489-6502253624684502771?l=hacelafuerza.blogspot.com' alt='' /></div>Charliehttp://www.blogger.com/profile/01428756858272529400noreply@blogger.com2tag:blogger.com,1999:blog-2776880480631854489.post-16681989918400924532011-10-17T20:33:00.000-07:002011-10-17T22:01:39.067-07:00<script src="http://code.google.com/apis/gears/gears_init.js" type="text/javascript"></script><script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=true" type="text/javascript"></script><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script><p>I've been coming up with some interesting but half-baked app ideas lately. So, with all this psych but no clear direction, I decided to familiarize myself with the Google Maps and Places APIs, just to find an outlet for all of this unfocused energy. Here's what happened..</p><br /><h3>jquery.aroundtheblock widget demo</h3><div id="container" style="clear:both;"></div><br /><p>I'd love to hear what you think!</p><style type="text/css">.dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }.dropdown dd { position:relative; }.dropdown a, .dropdown a:visited { color: #232323; text-decoration:none; outline:none; }.dropdown a:hover { color: #232323; }.dropdown dt a:hover, .dropdown dt a:focus { color: #232323; border:1px solid #A8A8A8; }.dropdown dt a { background:#EBEBEB url(http://i1083.photobucket.com/albums/j400/cshannon4583/Jupiter/arrow.png) no-repeat scroll right center; display:block; padding-right:20px; border:1px solid #d4ca9a; width:150px; color: #232323;}.dropdown dt a span { cursor:pointer; display:block; padding:5px; }.dropdown dd ul{ background:#EBEBEB none repeat scroll 0 0; border:1px solid #d4ca9a; display:none; z-index:100000; left:0px; padding:5px 0px; position:absolute; top:2px; width:auto; min-width:170px; list-style:none;}.dropdown span.value { display:none;}.dropdown dd ul li a { color: #232323; padding:5px; display:block; }.dropdown dd ul li a:hover { color: #232323; background-color:#DEDEDE;} .dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; }.flagvisibility { display:none;}.tinyscrollbar { margin: 20px 0 10px;}.tinyscrollbar .viewport { overflow: hidden; position: relative;}.tinyscrollbar .overview { left: 0; list-style: none outside none; margin: 0; padding: 0; position: absolute; top: 0; width:100%;}.tinyscrollbar .overview > div:hover{ background-color: #eeeeee; opacity: 1;}.tinyscrollbar .scrollbar { background: url("http://i1083.photobucket.com/albums/j400/cshannon4583/Jupiter/bg-scrollbar-track-y.png") no-repeat scroll 0 0 transparent; float: right; position: relative; width: 15px;}.tinyscrollbar .track { background: url("http://i1083.photobucket.com/albums/j400/cshannon4583/Jupiter/bg-scrollbar-trackend-y.png") no-repeat scroll 0 100% transparent; height: 100%; position: relative; width: 15px;}.tinyscrollbar .thumb { background: url("http://i1083.photobucket.com/albums/j400/cshannon4583/Jupiter/bg-scrollbar-thumb-y.png") no-repeat scroll 50% 100% transparent; cursor: pointer; height: 20px; left: -5px; overflow: hidden; position: absolute; top: 0; width: 25px;}.tinyscrollbar .thumb .end { background: url("http://i1083.photobucket.com/albums/j400/cshannon4583/Jupiter/bg-scrollbar-thumb-y.png") no-repeat scroll 50% 0 transparent; height: 5px; overflow: hidden; width: 25px;}.tinyscrollbar .disable { display: none;}#container img { padding:0px; background:none; border:none; box-shadow:none;}#container ul, #container li { padding:0px; margin:0px;}#container { color: #232323; font-family: "Trebuchet MS",Verdana,Helvetica,Sans-Serif; font-size: 0.85em;}</style><script type="text/javascript">(function($){$.tiny=$.tiny||{};$.tiny.scrollbar={options:{axis:'y',wheel:40,scroll:true,size:'auto',sizethumb:'auto'}};$.fn.tinyscrollbar=function(options){var options=$.extend({},$.tiny.scrollbar.options,options);this.each(function(){$(this).data('tsb',new Scrollbar($(this),options));});return this;};$.fn.tinyscrollbar_update=function(sScroll){return $(this).data('tsb').update(sScroll);};function Scrollbar(root,options){var oSelf=this;var oWrapper=root;var oViewport={obj:$('.viewport',root)};var oContent={obj:$('.overview',root)};var oScrollbar={obj:$('.scrollbar',root)};var oTrack={obj:$('.track',oScrollbar.obj)};var oThumb={obj:$('.thumb',oScrollbar.obj)};var sAxis=options.axis=='x',sDirection=sAxis?'left':'top',sSize=sAxis?'Width':'Height';var iScroll,iPosition={start:0,now:0},iMouse={};function initialize(){oSelf.update();setEvents();return oSelf;}this.update=function(sScroll){oViewport[options.axis]=oViewport.obj[0]['offset'+sSize];oContent[options.axis]=oContent.obj[0]['scroll'+sSize];oContent.ratio=oViewport[options.axis]/oContent[options.axis];oScrollbar.obj.toggleClass('disable',oContent.ratio>=1);oTrack[options.axis]=options.size=='auto'?oViewport[options.axis]:options.size;oThumb[options.axis]=Math.min(oTrack[options.axis],Math.max(0,(options.sizethumb=='auto'?(oTrack[options.axis]*oContent.ratio):options.sizethumb)));oScrollbar.ratio=options.sizethumb=='auto'?(oContent[options.axis]/oTrack[options.axis]):(oContent[options.axis]-oViewport[options.axis])/(oTrack[options.axis]-oThumb[options.axis]);iScroll=(sScroll=='relative'&&oContent.ratio<=1)?Math.min((oContent[options.axis]-oViewport[options.axis]),Math.max(0,iScroll)):0;iScroll=(sScroll=='bottom'&&oContent.ratio<=1)?(oContent[options.axis]-oViewport[options.axis]):isNaN(parseInt(sScroll))?iScroll:parseInt(sScroll);setSize();};function setSize(){oThumb.obj.css(sDirection,iScroll/oScrollbar.ratio);oContent.obj.css(sDirection,-iScroll);iMouse['start']=oThumb.obj.offset()[sDirection];var sCssSize=sSize.toLowerCase();oScrollbar.obj.css(sCssSize,oTrack[options.axis]);oTrack.obj.css(sCssSize,oTrack[options.axis]);oThumb.obj.css(sCssSize,oThumb[options.axis]);};function setEvents(){oThumb.obj.bind('mousedown',start);oThumb.obj[0].ontouchstart=function(oEvent){oEvent.preventDefault();oThumb.obj.unbind('mousedown');start(oEvent.touches[0]);return false;};oTrack.obj.bind('mouseup',drag);if(options.scroll&&this.addEventListener){oWrapper[0].addEventListener('DOMMouseScroll',wheel,false);oWrapper[0].addEventListener('mousewheel',wheel,false);}else if(options.scroll){oWrapper[0].onmousewheel=wheel;}};function start(oEvent){iMouse.start=sAxis?oEvent.pageX:oEvent.pageY;var oThumbDir=parseInt(oThumb.obj.css(sDirection));iPosition.start=oThumbDir=='auto'?0:oThumbDir;$(document).bind('mousemove',drag);document.ontouchmove=function(oEvent){$(document).unbind('mousemove');drag(oEvent.touches[0]);};$(document).bind('mouseup',end);oThumb.obj.bind('mouseup',end);oThumb.obj[0].ontouchend=document.ontouchend=function(oEvent){$(document).unbind('mouseup');oThumb.obj.unbind('mouseup');end(oEvent.touches[0]);};return false;};function wheel(oEvent){if(!(oContent.ratio>=1)){oEvent=$.event.fix(oEvent||window.event);var iDelta=oEvent.wheelDelta?oEvent.wheelDelta/120:-oEvent.detail/3;iScroll-=iDelta*options.wheel;iScroll=Math.min((oContent[options.axis]-oViewport[options.axis]),Math.max(0,iScroll));oThumb.obj.css(sDirection,iScroll/oScrollbar.ratio);oContent.obj.css(sDirection,-iScroll);oEvent.preventDefault();};};function end(oEvent){$(document).unbind('mousemove',drag);$(document).unbind('mouseup',end);oThumb.obj.unbind('mouseup',end);document.ontouchmove=oThumb.obj[0].ontouchend=document.ontouchend=null;return false;};function drag(oEvent){if(!(oContent.ratio>=1)){iPosition.now=Math.min((oTrack[options.axis]-oThumb[options.axis]),Math.max(0,(iPosition.start+((sAxis?oEvent.pageX:oEvent.pageY)-iMouse.start))));iScroll=iPosition.now*oScrollbar.ratio;oContent.obj.css(sDirection,-iScroll);oThumb.obj.css(sDirection,iPosition.now);}return false;};return initialize();};})(jQuery);</script><script type="text/javascript">/*-----------------------------------------------------------------------------------------------------------*//* Author: Charlie Shannon/* Date: 10/17/2011/* ------------------------------------------------------------------/* Developed against jquery 1.5.1/* Requires jquery.tinyscrollbar.min.js (http://baijs.nl/tinyscrollbar/)/* Requires Google Maps with Places Library (http://maps.googleapis.com/maps/api/js?libraries=places&sensor=[true_or_false])/*/* Contains a custom implementation of Janko's definition list (DL) dropdown:/* (http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx)/*-----------------------------------------------------------------------------------------------------------*//*-----------------------------------------------------------------------------------------------*//*-----------------------------------------------------------------------------------------------*/function jankoselect_init() { //Bind click functionality to open/close dropdown when clicked. //(should also close all other dropdowns) $(".dropdown dt a").click(function () { var parentDropDown = $(this).parents(".dropdown").get(0); $(".dropdown").filter(function (index) { return parentDropDown != this; }).find("dd ul").hide(); $(parentDropDown).find("dd ul").toggle(); }); $(".dropdown dd ul li a").click(function () { var text = $(this).html(); $(this).parents(".dropdown").find("dt a span").html(text); $(this).parents(".dropdown").find("dd ul").hide(); }); $(document).bind('click', function (e) { var $clicked = $(e.target); if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide(); });}function jankoselect_getSelectedValue(id) { return $("#" + id).find("dt a span.value").html();}/*-----------------------------------------------------------------------------------------------*//*-----------------------------------------------------------------------------------------------*///namespacevar aroundtheblock = aroundtheblock || {};//widgetFactoryaroundtheblock.widgetFactory = function () { preload_mouseover_images( ['http://i1083.photobucket.com/albums/j400/cshannon4583/Jupiter/star-db.png', 'http://i1083.photobucket.com/albums/j400/cshannon4583/Jupiter/star-r.png', 'http://i1083.photobucket.com/albums/j400/cshannon4583/Jupiter/geolocation-l.png'] ); function preload_mouseover_images(arrayOfImages) { $(arrayOfImages).each(function () { $('<img/>')[0].src = this; }); }}//widgetFactory.createaroundtheblock.widgetFactory.prototype.create = function (location, containerDiv, googlePlacesAPIKey, mapWidth, mapHeight, scrollboxWidth, scrollboxHeight) { var zoomLevelsByRadius = [15, 14, 13, 12, 11]; var GoogleMapsCategories = ['art_gallery', 'bar', 'beauty_salon', 'cafe', 'clothing_store', 'library', 'liquor_store', 'museum', 'night_club', 'park', 'pharmacy', 'restaurant', 'shopping_mall', 'spa', 'zoo']; var GoogleMapsCategories_Friendly = ['Art Galleries', 'Bars', 'Beauty Salons', 'Cafés', 'Clothing Stores', 'Libraries', 'Liquor Stores', 'Museums', 'Night Clubs', 'Parks', 'Pharmacies', 'Restaurants', 'Shopping Malls', 'Spas', 'Zoos']; //build up the supporting DOM elements var table = document.createElement('table'); containerDiv.appendChild(table); var tr1 = document.createElement('tr'); table.appendChild(tr1); var td1 = document.createElement('td'); td1.setAttribute('valign', 'top'); td1.setAttribute('rowspan', '2'); td1.style.backgroundColor = 'White'; td1.style.padding = '5px'; tr1.appendChild(td1); var mapDiv = document.createElement('div'); mapDiv.id = 'map_canvas'; mapDiv.style.width = mapWidth + 'px'; mapDiv.style.height = mapHeight + 'px'; td1.appendChild(mapDiv); var td2 = document.createElement('td'); td2.setAttribute('valign', 'top'); td2.style.paddingLeft = '15px'; td2.style.width = '170px'; tr1.appendChild(td2); //Category dropdown var dl = document.createElement('dl'); dl.id = 'categories'; dl.setAttribute('class', 'dropdown'); td2.appendChild(dl); var dt = document.createElement('dt'); dl.appendChild(dt); var aTitle = document.createElement('a'); aTitle.setAttribute('href', '#'); dt.appendChild(aTitle); var spanTitle = document.createElement('span'); spanTitle.innerHTML = 'Filter by Category..'; aTitle.appendChild(spanTitle); var dd = document.createElement('dd'); dl.appendChild(dd); var ul = document.createElement('ul'); dd.appendChild(ul); var liAll = document.createElement('li'); ul.appendChild(liAll); var aLiAll = document.createElement('a'); aLiAll.setAttribute('href', '#'); aLiAll.innerHTML = 'No Filter'; liAll.appendChild(aLiAll); var spanValueAll = document.createElement('span'); spanValueAll.setAttribute('class', 'value'); spanValueAll.innerHTML = 'no_filter'; aLiAll.appendChild(spanValueAll); var hrInList = document.createElement('hr'); hrInList.style.border = '1px dotted #555555'; hrInList.style.borderStyle = 'none none dotted'; hrInList.style.width = '90%'; ul.appendChild(hrInList); for (var i = 0; i < GoogleMapsCategories_Friendly.length; i++) { var li = document.createElement('li'); ul.appendChild(li); var aLi = document.createElement('a'); aLi.setAttribute('href', '#'); aLi.innerHTML = GoogleMapsCategories_Friendly[i]; li.appendChild(aLi); var spanValue = document.createElement('span'); spanValue.setAttribute('class', 'value'); spanValue.innerHTML = GoogleMapsCategories[i]; aLi.appendChild(spanValue); } var td3 = document.createElement('td'); td3.setAttribute('valign', 'top'); td3.style.width = '170px'; tr1.appendChild(td3); //Distance dropdown var dl2 = document.createElement('dl'); dl2.id = 'radii'; dl2.setAttribute('class', 'dropdown'); td3.appendChild(dl2); var dt2 = document.createElement('dt'); dl2.appendChild(dt2); var aTitle2 = document.createElement('a'); aTitle2.setAttribute('href', '#'); dt2.appendChild(aTitle2); var spanTitle2 = document.createElement('span'); spanTitle2.innerHTML = 'Filter by Distance..'; aTitle2.appendChild(spanTitle2); var dd2 = document.createElement('dd'); dl2.appendChild(dd2); var ul2 = document.createElement('ul'); dd2.appendChild(ul2); //.5 km var liHalfKm = document.createElement('li'); ul2.appendChild(liHalfKm); var aLiHalfKm = document.createElement('a'); aLiHalfKm.setAttribute('href', '#'); aLiHalfKm.innerHTML = '.5 km'; liHalfKm.appendChild(aLiHalfKm); var spanValueHalfKm = document.createElement('span'); spanValueHalfKm.setAttribute('class', 'value'); spanValueHalfKm.innerHTML = '500'; aLiHalfKm.appendChild(spanValueHalfKm); //1 km var liOneKm = document.createElement('li'); ul2.appendChild(liOneKm); var aLiOneKm = document.createElement('a'); aLiOneKm.setAttribute('href', '#'); aLiOneKm.innerHTML = '1 km'; liOneKm.appendChild(aLiOneKm); var spanValueOneKm = document.createElement('span'); spanValueOneKm.setAttribute('class', 'value'); spanValueOneKm.innerHTML = '1000'; aLiOneKm.appendChild(spanValueOneKm); //2 km var liTwoKm = document.createElement('li'); ul2.appendChild(liTwoKm); var aLiTwoKm = document.createElement('a'); aLiTwoKm.setAttribute('href', '#'); aLiTwoKm.innerHTML = '2 km'; liTwoKm.appendChild(aLiTwoKm); var spanValueTwoKm = document.createElement('span'); spanValueTwoKm.setAttribute('class', 'value'); spanValueTwoKm.innerHTML = '2000'; aLiTwoKm.appendChild(spanValueTwoKm); //5 km var liFiveKm = document.createElement('li'); ul2.appendChild(liFiveKm); var aLiFiveKm = document.createElement('a'); aLiFiveKm.setAttribute('href', '#'); aLiFiveKm.innerHTML = '5 km'; liFiveKm.appendChild(aLiFiveKm); var spanValueFiveKm = document.createElement('span'); spanValueFiveKm.setAttribute('class', 'value'); spanValueFiveKm.innerHTML = '5000'; aLiFiveKm.appendChild(spanValueFiveKm); //10 km var liTenKm = document.createElement('li'); ul2.appendChild(liTenKm); var aLiTenKm = document.createElement('a'); aLiTenKm.setAttribute('href', '#'); aLiTenKm.innerHTML = '10 km'; liTenKm.appendChild(aLiTenKm); var spanValueTenKm = document.createElement('span'); spanValueTenKm.setAttribute('class', 'value'); spanValueTenKm.innerHTML = '10000'; aLiTenKm.appendChild(spanValueTenKm); var td4 = document.createElement('td'); td4.style.paddingLeft = '10px'; tr1.appendChild(td4); var geolocationImg = document.createElement('img'); geolocationImg.setAttribute('src', 'http://i1083.photobucket.com/albums/j400/cshannon4583/Jupiter/geolocation.png'); geolocationImg.style.width = '18px'; geolocationImg.style.height = '18px'; geolocationImg.style.verticalAlign = 'middle'; geolocationImg.style.cursor = 'pointer'; td4.appendChild(geolocationImg); $(geolocationImg).hover( function () { this.setAttribute('src', 'http://i1083.photobucket.com/albums/j400/cshannon4583/Jupiter/geolocation-l.png'); }, function () { this.setAttribute('src', 'http://i1083.photobucket.com/albums/j400/cshannon4583/Jupiter/geolocation.png'); } ); var tr2 = document.createElement('tr'); table.appendChild(tr2); var td5 = document.createElement('td'); td5.setAttribute('valign', 'top'); td5.setAttribute('colspan', '3'); td5.style.paddingLeft = '15px'; tr2.appendChild(td5); var hr1 = document.createElement('hr'); hr1.style.color = 'White'; hr1.style.backgroundColor = 'White'; hr1.style.border = '1px dotted #555555'; hr1.style.borderStyle = 'none none dotted'; td5.appendChild(hr1); var scrollbarDiv = document.createElement('div'); scrollbarDiv.setAttribute('class', 'tinyscrollbar'); scrollbarDiv.style.width = scrollboxWidth + 'px'; td5.appendChild(scrollbarDiv); var innerScrollbarDiv = document.createElement('div'); innerScrollbarDiv.setAttribute('class', 'scrollbar'); scrollbarDiv.appendChild(innerScrollbarDiv); var trackDiv = document.createElement('div'); trackDiv.setAttribute('class', 'track'); innerScrollbarDiv.appendChild(trackDiv); var thumbDiv = document.createElement('div'); thumbDiv.setAttribute('class', 'thumb'); trackDiv.appendChild(thumbDiv); var endDiv = document.createElement('div'); endDiv.setAttribute('class', 'end'); thumbDiv.appendChild(endDiv); var viewportDiv = document.createElement('div'); viewportDiv.setAttribute('class', 'viewport'); viewportDiv.style.width = (scrollboxWidth - 20) + 'px'; viewportDiv.style.height = scrollboxHeight + 'px'; scrollbarDiv.appendChild(viewportDiv); var placesDiv = document.createElement('div'); placesDiv.id = 'places_canvas'; placesDiv.setAttribute('class', 'overview'); viewportDiv.appendChild(placesDiv); var hr2 = document.createElement('hr'); hr2.style.color = 'White'; hr2.style.backgroundColor = 'White'; hr2.style.border = '1px dotted #555555'; hr2.style.borderStyle = 'none none dotted'; td5.appendChild(hr2); var pwdByDiv = document.createElement('div'); td5.appendChild(pwdByDiv); var pwdByImage = document.createElement('img'); pwdByImage.setAttribute('src', 'http://code.google.com/apis/maps/documentation/places/images/powered-by-google-on-white.png'); pwdByImage.setAttribute('alt', 'powered by Google'); pwdByDiv.appendChild(pwdByImage); jankoselect_init(); //When dropdown selection changes, bind new places $("#categories.dropdown dd ul li a").click(BindMarkersFromDropDownValues); $("#radii.dropdown dd ul li a").click(BindMarkersFromDropDownValues); function BindMarkersFromDropDownValues() { var selectedCategoryValue = jankoselect_getSelectedValue('categories'); if (!selectedCategoryValue || selectedCategoryValue == null) { selectedCategoryValue = 'no_filter'; } var selectedRadiusValue = jankoselect_getSelectedValue('radii'); if (!selectedRadiusValue || selectedRadiusValue == null) { selectedRadiusValue = '1000'; } if (selectedCategoryValue == 'no_filter') { var unfilteredRequest = { location: location, radius: selectedRadiusValue, types: GoogleMapsCategories, sensor: true, key: googlePlacesAPIKey }; BindMarkers(unfilteredRequest); } else { var filteredRequest = { location: location, radius: selectedRadiusValue, types: new Array(selectedCategoryValue), sensor: true, key: googlePlacesAPIKey }; BindMarkers(filteredRequest); } } // <table> // <tr> // <td valign="top" rowspan="2" style="background-color:White;padding:5px;"><div id="map_canvas" style="width:??px;height:??px;"></div></td> // <td valign="top" style="padding-left:15px;width:170px;"> // <dl id="categories" class="dropdown"> // <dt><a href="#"><span>Filter by Category...</span></a></dt> // <dd> // <ul> // <li><a href="#">Art Galleries<span class="value">art_gallery</span></a></li> // <li><a href="#">Bars<span class="value">bar</span></a></li> // etc... // </ul> // </dd> // </dl> // </td> // <td valign="top" style="width:170px;"> // <dl id="radii" class="dropdown"> // <dt><a href="#"><span>Filter by Distance...</span></a></dt> // <dd> // <ul> // <li><a href="#">.5 km<span class="value">500</span></a></li> // <li><a href="#">1 km<span class="value">1000</span></a></li> // <li><a href="#">2 km<span class="value">2000</span></a></li> // <li><a href="#">5 km<span class="value">5000</span></a></li> // <li><a href="#">10 km<span class="value">10000</span></a></li> // </ul> // </dd> // </dl> // </td> // <td>&nbsp;</td> // </tr> // <tr> // <td valign="top" colspan="3" style="padding-left:15px;"> // <hr /> // <div style="tinyscrollbar"> // <div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div> // <div class="viewport"> // <div id="places_canvas" class="overview"> // // </div> // </div> // </div> // <hr /> // <div><img src="/images/powered-by-google/desktop/powered-by-google-on-white.png" alt="powered by Google" /></div> // </td> // </tr> // </table> function getZoomLevelFromRadius(radius) { var defaultZoomLevel = zoomLevelsByRadius[1]; switch (radius) { case 500: return zoomLevelsByRadius[0]; case 1000: return zoomLevelsByRadius[1]; case 2000: return zoomLevelsByRadius[2]; case 5000: return zoomLevelsByRadius[3]; case 10000: return zoomLevelsByRadius[4]; default: return defaultZoomLevel; } } //Spin up the Google Map var mapOptions = { zoom: zoomLevelsByRadius[1], mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map($('#map_canvas').get(0), mapOptions); map.setCenter(location); //Put a Marker at the provided location function placeMarker(location, iconUrl) { return new google.maps.Marker({ position: location, map: map, icon: iconUrl, animation: google.maps.Animation.DROP, clickable: true }); } //Retrieve top 20 places in the following categories (1 km radius) var initialRequest = { location: location, radius: '1000', types: GoogleMapsCategories, sensor: true, key: googlePlacesAPIKey }; BindMarkers(initialRequest); var markers; function BindMarkers(placesRequest) { //Spin up the Google Places Service var service = new google.maps.places.PlacesService(map); service.search(placesRequest, placesCallback); //Keep track of all the markers, so we can add them all at once ('cause it looks cooler that way) var markerLocations = new Array(); markerLocations[0] = location; var infoWindowMarker; var isInfoWindowOpen = false; function placesCallback(results, status) { if (status == google.maps.places.PlacesServiceStatus.OK || status == google.maps.places.PlacesServiceStatus.ZERO_RESULTS) { var places = results; var placeRows = new Array(); $('#places_canvas').empty(); if (status == google.maps.places.PlacesServiceStatus.ZERO_RESULTS) { var noResultsSpan = document.createElement('span'); //If all categories were searched and nothing was found (very rare) if (placesRequest.types.length == GoogleMapsCategories.length) { noResultsSpan.innerHTML = 'Whoah! There\'s nothing at all around your block!'; } else { //Loop category names to find index of friendly name for (var i = 0; i < GoogleMapsCategories.length; i++) { if (GoogleMapsCategories[i] == placesRequest.types[0]) { noResultsSpan.innerHTML = 'Sorry, we didn\' t find any ' + GoogleMapsCategories_Friendly[i].toLowerCase() + ' around your block.'; break; } } } $('#places_canvas').get(0).appendChild(noResultsSpan); } for (var i = 0; i < results.length; i++) { var place = results[i]; markerLocations[i + 1] = place.geometry.location; var row = document.createElement('div'); row.id = 'place_id_' + place.id; row.style.padding = '3px'; row.setAttribute('order', (i + 1).toString()); row.style.cursor = 'pointer'; var icon = document.createElement('img'); icon.src = place.icon; icon.style.width = '18px'; icon.style.height = '18px'; row.appendChild(icon); var span = document.createElement('span'); span.style.paddingLeft = '3px'; span.innerHTML = place.name; row.appendChild(span); $('#places_canvas').get(0).appendChild(row); placeRows[i] = row; } $('.tinyscrollbar').tinyscrollbar(); //Clear out any dangling markers if (markers) { for (var j = 0; j < markers.length; j++) { markers[j].setMap(null); } } markers = new Array(); //Set the map's zoom level based on the search radius map.setZoom(getZoomLevelFromRadius(parseInt(placesRequest.radius))); //Handle the home marker separately (add tooltip, bring to front) markers[0] = placeMarker(markerLocations[0], 'http://i1083.photobucket.com/albums/j400/cshannon4583/Jupiter/star-b.png'); markers[0].setTitle('You are here'); markers[0].setZIndex(google.maps.Marker.MAX_ZINDEX + 1); for (var i = 1; i < markerLocations.length; i++) { markers[i] = placeMarker(markerLocations[i], 'http://i1083.photobucket.com/albums/j400/cshannon4583/Jupiter/star.png'); } //add mouseover/mouseout events to markers google.maps.event.addListener(markers[0], 'mouseover', function (event) { this.setIcon('http://i1083.photobucket.com/albums/j400/cshannon4583/Jupiter/star-db.png'); }); google.maps.event.addListener(markers[0], 'mouseout', function (event) { this.setIcon('http://i1083.photobucket.com/albums/j400/cshannon4583/Jupiter/star-b.png'); }); var infoWindow = new google.maps.InfoWindow(); google.maps.event.addListener(infoWindow, 'closeclick', function (event) { isInfoWindowOpen = false; }); $(geolocationImg).click(function () { if (infoWindow) { infoWindow.close(); isInfoWindowOpen = false; } map.panTo(location); }); for (var i = 1; i < markers.length; i++) { google.maps.event.addListener(markers[i], 'mouseover', function (event) { this.setIcon('http://i1083.photobucket.com/albums/j400/cshannon4583/Jupiter/star-r.png'); }); google.maps.event.addListener(markers[i], 'mouseout', function (event) { this.setIcon('http://i1083.photobucket.com/albums/j400/cshannon4583/Jupiter/star.png'); }); google.maps.event.addListener(markers[i], 'click', function (event) { for (var i = 0; i < markers.length; i++) { if (markers[i] == this) { //If this is the marker we previously clicked to open the window, just close it if (infoWindowMarker && infoWindowMarker == this && isInfoWindowOpen) { infoWindow.close(); isInfoWindowOpen = false; return; } //Get details for the current Place var request = { reference: places[i - 1].reference }; service.getDetails(request, $.proxy(function (placeDetail, status) { if (status == google.maps.places.PlacesServiceStatus.OK) { var detailHTML = placeDetail.rating ? '<div>' : '<div style="padding-bottom:5px;">'; detailHTML = detailHTML + '<img src="' + placeDetail.icon + '" style="width:18px;height:18px;" />' detailHTML = detailHTML + '<span style="padding-left:3px;">' + placeDetail.name + '</span></div>'; if (placeDetail.rating) { var wholeRating = Math.floor(placeDetail.rating); var hasHalfRating = (placeDetail.rating - wholeRating) > 0; var ratingHTML = '<div style="padding-bottom:5px;">'; for (var j = 0; j < wholeRating; j++) { ratingHTML = ratingHTML + '<img src="http://i1083.photobucket.com/albums/j400/cshannon4583/Jupiter/rating_full.png" style="height:11px;width:11px;" />'; } if (hasHalfRating) { ratingHTML = ratingHTML + '<img src="http://i1083.photobucket.com/albums/j400/cshannon4583/Jupiter/rating_half.png" style="height:11px;width:11px;" />'; } var emptyRatingStars = (5 - wholeRating); if (hasHalfRating) emptyRatingStars--; for (var k = 0; k < emptyRatingStars; k++) { ratingHTML = ratingHTML + '<img src="http://i1083.photobucket.com/albums/j400/cshannon4583/Jupiter/rating_empty.png" style="height:11px;width:11px;" />'; } ratingHTML = ratingHTML + '</div>'; detailHTML = detailHTML + ratingHTML; } if (placeDetail.formatted_phone_number && placeDetail.formatted_phone_number.length > 0) { detailHTML = detailHTML + '<div><span>' + placeDetail.formatted_phone_number + '</span></div>'; } if (placeDetail.formatted_address && placeDetail.formatted_address.length > 0) { detailHTML = detailHTML + '<div><span>' + placeDetail.formatted_address + '</span></div>'; } if (placeDetail.url) { detailHTML = detailHTML + '<hr style="color:White;background-color:White;border:1px dotted #555555;border-style:none none dotted;" />'; detailHTML = detailHTML + '<div><a href="#" onclick="window.open(\'' + placeDetail.url + '\', \'' + placeDetail.name.replace("'", "\\'") + '\');">Google Place page</a></div>'; } if (placeDetail.html_attributions && placeDetail.html_attributions.length > 0) { detailHTML = detailHTML + '<div>' + placeDetail.html_attributions + '</div>'; } infoWindow.setContent(detailHTML); infoWindow.open(map, this); isInfoWindowOpen = true; infoWindowMarker = this; } }, this)); break; } } }); } //trigger mouseover/mouseout events on markers from place rows //also trigger click events on markers from place rows for (var i = 0; i < placeRows.length; i++) { $(placeRows[i]).hover( function () { var order = parseInt(this.getAttribute('order')); google.maps.event.trigger(markers[order], 'mouseover'); }, function () { var order = parseInt(this.getAttribute('order')); google.maps.event.trigger(markers[order], 'mouseout'); } ); $(placeRows[i]).click(function () { var order = parseInt(this.getAttribute('order')); google.maps.event.trigger(markers[order], 'click'); }); } } } //Pan back to the center map.panTo(location); }}</script><script type="text/javascript"> function initialize() { var initialLocation; var siberia = new google.maps.LatLng(60, 105); var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687); var browserSupportFlag = new Boolean(); var factory = new aroundtheblock.widgetFactory(); var googlePlacesAPIKey = 'AIzaSyAhIqRE3_t7BHatuEI-_Cw_lXvInDPxvnE'; // Try W3C Geolocation (Preferred) if (navigator.geolocation) { browserSupportFlag = true; navigator.geolocation.getCurrentPosition(function (position) { initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); factory.create(initialLocation, $('#container').get(0), googlePlacesAPIKey, 400, 400, 400, 285); }, function () { handleNoGeolocation(browserSupportFlag); }); // Try Google Gears Geolocation } else if (google.gears) { browserSupportFlag = true; var geo = google.gears.factory.create('beta.geolocation'); geo.getCurrentPosition(function (position) { initialLocation = new google.maps.LatLng(position.latitude, position.longitude); factory.create(initialLocation, $('#container').get(0), googlePlacesAPIKey, 400, 400, 400, 285); }, function () { handleNoGeoLocation(browserSupportFlag); }); // Browser doesn't support Geolocation } else { browserSupportFlag = false; handleNoGeolocation(browserSupportFlag); } function handleNoGeolocation(errorFlag) { if (errorFlag == true) { alert("Geolocation service failed."); } else { alert("Your browser doesn't support geolocation. We've placed you in Siberia."); } } } google.maps.event.addDomListener(window, 'load', initialize); //google.maps.event.addDomListener(window, 'load', jankoselect_init);</script><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/2776880480631854489-1668198991840092453?l=hacelafuerza.blogspot.com' alt='' /></div>Charliehttp://www.blogger.com/profile/01428756858272529400noreply@blogger.com0