/* Hello everyone, thank you very much for the comments and the likes of the Rome by night project, it filled me with pride. I start a new project based on the first one, but I extend it to the whole world! Stay tuned! World by night is coming! API: Google API's PLACES Google API's OPENPANORAMA (streetview) Google API's Fonts CDN: https://alberto.noviia.com/sololearn/romebynight <--- yep, I do it well LIB: jquery jquery-ui modernizr classiec notificationFx FONTS: Domine Open Sans Satisfy Steps for v1: ok - design a new custom Google map layout, night inspired ok - define list of best points of interest (POI) in the world. 20 minimum :) ok - design new marker ok - develop asynchronous script to open map. this maybe fix the crash problem on some devices - !!!!IMPORTANT!!!! try to avoid Google DAILY_QUOTA_LIMIT error with a PHP proxy system and publish the solution on sololearn. this problem has been researched by developers for years without solution. I want to test myself - design new ui to search for a place in a simple view - develop new search panel, asynchronous connected to my cdn to show places by continent->country->city ok - reuse the good scripts of Rome by night v1 to show panoramas steps for v1.5 - design and develop a widget SUGGEST, so followers will send their POI - develop a rating system for POIs */ var rightPanelManualClosed = 0; //this is for UX, if an user click to close the panel, the app respect him and remove invasive auto opening of right panel eheheh enjoy :P var markersList = []; var lostAddr = []; var results = []; function initMap() { var POI =[ ['Great Wall of China', 'ChIJzyx_aNch8TUR3yIFlZslQNA', 'Asia','China','Huairou'], ['Petra', 'ChIJcWA7cPFuARURkSKaZwj5mxk', 'Asia', 'Jordan', 'Petra'], ['Christ the Redeemer', 'ChIJP6FKmNV_mQAR3gKVAdeEyZ0', 'South America', 'Brazil', 'Rio de Janeiro'], ['Machu Picchu', 'ChIJVVVViV-abZERJxqgpA43EDo', 'South America', 'Peru', 'Machu Picchu'], ['Chichèn Itzà', 'ChIJ58CR48Y4UY8Rmk2ZaKGgHnw', 'Central America', 'Mexico', 'Yucatan'], ['Taj Mahal', 'ChIJTz061CFxdDkRY8NL4oLAnyA', 'Asia', 'India', 'Uttar Pradesh'], ['Egyptian pyramids', 'ChIJGymPrIdFWBQRJCSloj8vDIE', 'Africa', 'Egypt', 'Cairo'], ['Parthenon', 'ChIJYe45yhm9oRQRGKJ4uHmgPxs', 'Europe', 'Greece', 'Athens'], ['Alhambra', 'ChIJ7zWrEbT8cQ0Rq33EEj0gSFU', 'Europe', 'Spain', 'Granada'], ['Angkor Wat', 'ChIJLSea6ooWEDERjUGwVxGoqz4', 'Asia','Cambodia', 'Angkor'], ['Easter Island', 'ChIJK67UqBfwR5kRti0qwO2z5bs', 'Oceania', 'Chile', 'Valparaìso'], ['Tour Eiffel', 'ChIJu_HX7B9w5kcRTRE4uAo9C9o', 'Europe', 'France', 'Paris'], ['Hagia Sophia', 'ChIJJxwBkr65yhQRrk9EN29vbiM', 'Europe', 'Turkey', 'Istanbul'], ['Temple of Kiyomizudera', 'ChIJB_vchdMIAWARujTEUIZlr2I', 'Asia', 'Japan', 'Kyoto'], ['Kremlin', 'ChIJc-UVs1BKtUYRaC6bPVq_hqg', 'Europe', 'Russia', 'Moscow'], ['Neuschwanstein Castle', 'ChIJXaNOxMr3nEcRo7ud02uGpsg', 'Europe', 'Germany', 'Füssen'], ['Statue of Liberty', 'ChIJPTacEpBQwokRKwIlDXelxkA', 'North America', 'USA', 'New York'], ['Stonehenge', 'ChIJEfYKhTvmc0gR3dLTvOJwkZc', 'Europe', 'United Kingdom', 'Amesbury'], ['Sydney Opera House', 'ChIJ3S-JXmauEmsRUcIaWtf4MzE', 'Oceania', 'Australia', 'Sydney'], //['Timbuctù', 'ChIJM4e8fJfOFw4RxrdYibwBb1Q', 'Africa', 'Mali', 'Timbuctù'], ['Colosseo', 'ChIJrZN2dLdhLxMR7yl1SoIp6sY', 'Europe', 'italy', 'Rome'], ['Basilica di San Pietro in Vaticano', 'ChIJWZsUt2FgLxMRg1KHzXfwS3I', 'Europe', 'Vatican', 'Vatican City'], ['Fontana di Trevi', 'ChIJ1UCDJ1NgLxMRtrsCzOHxdvY', 'Europe', 'italy', 'Rome'], ['Foro Romano', 'ChIJ782pg7NhLxMR5n3swAdAkfo', 'Europe', 'italy', 'Rome'], ['Pantheon', 'ChIJqUCGZ09gLxMRLM42IPpl0co', 'Europe', 'italy', 'Rome'], ['Piazza Navona', 'ChIJPRydwYNgLxMRSjOCLlYkV6M', 'Europe', 'italy', 'Rome'], ['Cappella Sistina', 'ChIJ268jxWVgLxMRIj61f4fIFqs', 'Europe', 'italy', 'Rome'], ['Musei Vaticani', 'ChIJKcGbg2NgLxMRthZkUqDs4M8', 'Europe', 'italy', 'Rome'], ['Castel Sant\'Angelo', 'ChIJ0aTnEYeKJRMRiUF95xwRbDY', 'Europe', 'italy', 'Rome'], ['Campidoglio', 'ChIJOclom0xgLxMRURy9OLL7Hg4', 'Europe', 'italy', 'Rome'], ['Piazza Venezia', 'ChIJJfPPGE1gLxMRBgH6_EY2DYM', 'Europe', 'italy', 'Rome'], ['Piazza di Spagna', 'ChIJ4_TEG1VgLxMROFkd29jWdug', 'Europe', 'italy', 'Rome'], ['Piazza del Popolo', 'ChIJ0TL65fhgLxMRaipZ80mHe8g', 'Europe', 'italy', 'Rome'], ['Campo de\' Fiori', 'ChIJCb6e9EVgLxMRp63sZ62Mk8k', 'Europe', 'italy', 'Rome'], ['Galleria Borghese', 'ChIJq-bXVgRhLxMRv3vgOXaktBs', 'Europe', 'italy', 'Rome'], ['Vittoriano', 'ChIJ412AG01gLxMR4T-4pwdIFSE', 'Europe', 'italy', 'Rome'], ['Circo Massimo', 'ChIJQQudjsthLxMRvrQD3R9S53k', 'Europe', 'italy', 'Rome'], ['Basilica di Santa Maria Maggiore', 'ChIJcw-l36RhLxMRON-ZxpBbvM8', 'Europe', 'italy', 'Rome'], ['Bocca della Verità', 'ChIJc_qXfTVgLxMRXyICcbR9K4Y', 'Europe', 'italy', 'Rome'], ['Villa d\'Este', 'ChIJw-YlX3B4LxMRmeEzTuqQHr8', 'Europe', 'italy', 'Rome'], ['Musei Capitolini', 'ChIJ8-wGeU9gLxMR--zJtnpGod4', 'Europe', 'italy', 'Rome'], ['Basilica di San Giovanni in Laterano', 'ChIJc6vKf79hLxMR-JBUkZ--MAE', 'Europe', 'italy', 'Rome'], ['Villa Adriana', 'ChIJcafxz1l4LxMR0D0uFxImBV0', 'Europe', 'italy', 'Rome'], ['Terme di Caracalla', 'ChIJ-7QYFs9hLxMRyPodSppcsAs', 'Europe', 'italy', 'Rome'], ['Gianicolo', 'ChIJ-Z2cHUBgLxMRz8Wfw_RW_Qw', 'Europe', 'italy', 'Rome'], ['Pincio', 'ChIJlYZIKvlgLxMRbBeXpZTHG2U', 'Europe', 'italy', 'Rome'], ['Palazzo del Quirinale', 'ChIJ5_TFQ6xhLxMRVPkqjbUNONM', 'Europe', 'italy', 'Rome'], ['Trastevere', 'ChIJ921caWhgLxMRM_bfeCcgn6M', 'Europe', 'italy', 'Rome'], ['Piazza San Pietro', 'ChIJIRbrOGZgLxMROSyE2uUHIHA', 'Europe', 'italy', 'Rome'], ['Fontana dei Quattro Fiumi', 'ChIJMX9e-09gLxMRWwB71Wo8020', 'Europe', 'italy', 'Rome'], ['Palatino', 'ChIJ8zdPo7VhLxMRwgAXwZzzm50', 'Europe', 'italy', 'Rome'] ]; var places = ''; var world = {lat: 50, lng: 1}; var infowindow = new google.maps.InfoWindow(); map = new google.maps.Map(document.getElementById('map'), { center: world, zoom: 3, styles: backgrounz[Math.floor(Math.random()*backgrounz.length) ] }); $('#mapIcon').fadeOut(1500); var intervalAutoClickMore = setInterval(function(){ $('#more').click(); //console.log('interval'); //console.log(POI); },3000); var timeout = 1; showMarkersPaginated(); function showMarkersPaginated(start = 0){ //console.log('----->'+start); for(a = start; a < (start+5); a++){ if(POI[a] !== undefined){ var response = detailsPlaces(POI[a],timeout); } //console.log(a+' > '+POI.length); if(a > POI.length ) { break; console.log('break'); } if(!POI.length>0 ) { clearInterval(intervalAutoClickMore); //console.log('stop'); } } //console.log(POI); } function detailsPlaces(p,timeout){ var request = {placeId: p[1]}; var service = new google.maps.places.PlacesService(map); service.getDetails(request, function (place, status,firstOnly) { if (status == google.maps.places.PlacesServiceStatus.OK) { createMarker(place); POI = POI.filter(function(item){ return item[1] != p[1] }); } else if (status == google.maps.places.PlacesServiceStatus.OVER_QUERY_LIMIT) { alertError(); } }); } function w(v){ $('#test').append(v+"
"); } // Create the places service. /*var service = new google.maps.places.PlacesService(map); var getNextPage = null;*/ $('#more').click(function() { //console.log('clicked'); var page = $(this).attr('data-page'); //console.log(page+'<----'); if (page === undefined){ page = 0; } //showMarkersPaginated(5*page); showMarkersPaginated(); $(this).attr('data-page', parseInt(page)+1); }); // Perform a nearby search. /* service.nearbySearch( {location: rome, radius: 30000, type: ['museum']}, function(results, status, pagination) { if (status !== 'OK') return; createMarkers(results); moreButton.disabled = !pagination.hasNextPage; getNextPage = pagination.hasNextPage && function() { pagination.nextPage(); }; }); */ function createMarkers(places){ for (var i = 0, place; place = places[i]; i++) { createMarker(place); } } function createMarker(place) { var bounds = new google.maps.LatLngBounds(); var placesList = document.getElementById('places'); var urlIcon = convertMarker(place); var image = { url: urlIcon, size: new google.maps.Size(128, 171), //origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(25, 50), //scaledSize: new google.maps.Size((place.name == 'Colosseo' ? 100 : 50), (place.name == 'Colosseo' ? 100 : 50)) scaledSize: new google.maps.Size(50,50) }; var marker = new google.maps.Marker({ map: map, icon: image, title: place.name, animation: google.maps.Animation.BOUNCE, position: place.geometry.location }); markersList.push(marker); var li = document.createElement('li'); li.textContent = place.name; li.setAttribute('onclick','Javascript: openStreet(\''+addslashes(place.name)+'\',\''+place.geometry.location+'\')'); placesList.appendChild(li); bounds.extend(place.geometry.location); //map.fitBounds(bounds); //$('#mapIcon').fadeOut(1500); var infowindowHTML = "

"; infowindowHTML += "

"+place.name+"

"; if(typeof place.photos !== 'undefined'){ infowindowHTML += "

Visit"; infowindowHTML += "

"; google.maps.event.addListener(marker, 'click', function(){ infowindow.close(); // Close previously opened infowindow infowindow.setContent( infowindowHTML ); infowindow.open(map, marker); }); } } function convertMarker(place){ /*if (place.name == 'Colosseo'){ return 'https://alberto.noviia.com/sololearn/romebynight/img/pin_colosseo.png'; }else{ rand = Math.floor(Math.random() * 13); return 'https://alberto.noviia.com/sololearn/romebynight/img/pin_'+rand+'.png'; }*/ return 'http://pngimages.net/sites/default/files/map-marker-png-image-100889.png'; } function openStreet(poiName,poiLocation){ //console.log(poi); poilLocation = poiLocation.replace(/["'()]/g,""); //poilLocation = poiLocation.replace(')',''); var aPoiLocation = poilLocation.split(", "); //console.log(aPoiLocation[0]+' '+aPoiLocation[1]); position = new google.maps.LatLng(aPoiLocation[0],aPoiLocation[1]); title = poiName; var panoramaOptions = { position: position, pov: { heading: 4, pitch: 10 } }; google.maps.event.clearInstanceListeners(window); google.maps.event.clearInstanceListeners(document); //google.maps.event.clearInstanceListeners(divReference[0]); //divReference.detach(); $('#streetview').fadeIn(500); var panorama = new google.maps.StreetViewPanorama(document.getElementById('streetview'), panoramaOptions); /*var placeMarker = new google.maps.Marker({ position: position, map: panorama, icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00', title: title });*/ map.setStreetView(panorama); $('#streetview').fadeIn(1500); $('#mapIcon').fadeIn(100); $('#mapIcon').effect( 'bounce', 500 ); } function addslashes (str) { return (str + '') .replace(/[\\"']/g, '\\$&') .replace(/\u0000/g, '\\0') } function streetViewClose(){ $('#streetview').slideUp(500); $('#mapIcon').slideUp(500); $('#streetview').html(''); setTimeout(function(){ hideShowPanel('show'); },1000); } var firstOnly = 0; function alertError(){ // simulate loading (for demo purposes only) /*if(firstOnly != 'stop') setTimeout( function() { // create the notification var notification = new NotificationFx({ message : '

It appened again...

DAILY QUOTA LIMIT

Come back tomorrow to enjoy Rome at It\'s best :)
Thank you for watching and watching and watching this project!

', layout : 'other', ttl : 5000, effect : 'thumbslider', type : 'notice', // notice, warning, error or success }); // show the notification notification.show(); }, 1200 ); // disable the button (for demo purposes only) this.disabled = true; firstOnly = 'stop'; */ } jQuery(function($) { setTimeout(function(){ $('#intro').fadeOut(1); setTimeout(function(){ initMap(); hideShowPanel('hide'); },1000); },3000); $('#right-panel').on('click',function(){ if($(this).css('right') == '-211px'){ hideShowPanel('show'); }else{ hideShowPanel('hide'); rightPanelManualClosed = 1; } }); }); function hideShowPanel(val){ if(val == 'show' && rightPanelManualClosed == 1) return; $('#right-panel').animate({ right:(val == 'hide' ? '-211px' : '0') },700); }

World’s POI v0.4