API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Mar 28th, 2017
248
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 13.45 KB | None | 0 0
raw download clone embed print report
  1. <!-- MAPA -->
  2. <div id="vmapa" class="row evnts-grid mapa-evnts">
  3.  
  4.     <div class="large-12 columns mevnts">
  5.       {if $arr_evento.id_evento neq 275}
  6.         <h3 style="margin-top:5px !important;">{"TXT18"|gettext}</h3>
  7.       {/if}
  8.         {if $arr_evento.id_evento eq 85}
  9.           <h4>Fortaleza - Localização Hotel Oficial</h4>
  10.         {elseif $arr_evento.id_evento eq 160}
  11.           <h4 class="gui">Distância dos hotéis parceiros ao centro</h4>
  12.         {else}
  13.           <h4 class="gui">{"TXT19"|gettext}</h4>
  14.         {/if}
  15.         <div id="evnts-mapa" style="margin:0px;margin-bottom:10px !important;padding:0px;width:100%;"></div>
  16.         <iframe id="fr_mapa" style="margin:0px;margin-bottom:10px !important;padding:0px;width:100%; display:none;" height="465" frameborder="0" style="border:0" src="">
  17.         </iframe>
  18.     </div>
  19.  
  20. </div>
  21.  
  22. <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&key=AIzaSyDr-E_62Ag83JG8OxMsE0RlC2bjJf3lF2w"></script>
  23.  
  24. <script>
  25.  
  26. var map;
  27. var directionsDisplay;
  28. var directionsService;
  29. var stepDisplay;
  30. var markerArray = [];
  31.  
  32. // Hoteis
  33. var hoteis = jQuery.parseJSON('{$hoteis_JSON}');
  34.  
  35. // Evento
  36. var evento = jQuery.parseJSON('{$evento_JSON}');
  37.  
  38.  
  39. {literal}
  40. function initialize() {
  41.  
  42.  
  43.     // Instantiate a directions service.
  44.     directionsService = new google.maps.DirectionsService();
  45.  
  46.     // Centralizar no evento
  47.     var evento_latLng = new google.maps.LatLng(evento.lat, evento.lng);
  48.     var zoom_mapa = parseInt(evento.zoom);
  49.     var centro = evento_latLng;
  50.     if(evento.id_evento == '51'){
  51.       centro = new google.maps.LatLng(-23.538604, -46.652085);
  52.     }
  53.  
  54.     // Create a map and center it.
  55.     var mapOptions = {
  56.         draggable: false,
  57.         scrollwheel: false,
  58.         zoom: zoom_mapa,
  59.         center: centro
  60.     }
  61.  
  62.     map = new google.maps.Map(document.getElementById('evnts-mapa'), mapOptions);
  63.     map.setOptions({draggable: true});
  64.     marker = new google.maps.Marker({
  65.         position: evento_latLng,
  66.         map: map,
  67.         animation: google.maps.Animation.DROP
  68.     });
  69.  
  70.  
  71. /**GUI HERE TO ADD THE MARKERS*/
  72.  
  73. {/literal}
  74. {if $arr_evento.id_evento eq 537}
  75.     {literal}
  76.       var iconBase = 'https://hoteis.evnts.com.br/img/campusMarkers/';
  77.       var icons = [];
  78.       var campus = new google.maps.Marker({
  79.         // position: {lat:-23.5709911   lng: -46.6520746},
  80.         position: new google.maps.LatLng(-23.57110596,-46.64997101),
  81.         map: map,
  82.         title: 'Campus São Paulo',
  83.         icon: {
  84.           url:iconBase+'campus.png',
  85.           scaledSize: new google.maps.Size(22, 26), // scaled size
  86.           origin: new google.maps.Point(0,0), // origin
  87.           anchor: new google.maps.Point(11,13) // anchor
  88.         }
  89.       });
  90.       icons.push(campus);
  91.  
  92.       var subway = new google.maps.Marker({
  93.         // position: {lat:-23.5684707   lng: -46.6482102},
  94.         position: new google.maps.LatLng(-23.5684707,-46.6482102),
  95.         map: map,
  96.         title: 'Subway',
  97.         icon: {
  98.           url:iconBase+'subway.png',
  99.           scaledSize: new google.maps.Size(22, 26), // scaled size
  100.           origin: new google.maps.Point(0,0), // origin
  101.           anchor: new google.maps.Point(11,13) // anchor
  102.         }
  103.       });
  104.       icons.push(subway);
  105.  
  106.       var mall = new google.maps.Marker({
  107.         // position: {lat:-23.5635221   lng: -46.6527251},
  108.         position: new google.maps.LatLng(-23.5635221,-46.6527251),
  109.         map: map,
  110.         title: 'Mall Cidade São Paulo',
  111.         icon: {
  112.           url:iconBase+'mall.png',
  113.           scaledSize: new google.maps.Size(22, 26), // scaled size
  114.           origin: new google.maps.Point(0,0), // origin
  115.           anchor: new google.maps.Point(11,13) // anchor
  116.         }
  117.       });
  118.       icons.push(mall);
  119.  
  120.       var mall2 = new google.maps.Marker({
  121.         // position: {lat:-23.5656667   lng: -46.650694},
  122.         position: new google.maps.LatLng(-23.5656667,-46.650694),
  123.         map: map,
  124.         title: 'Top Center Mall',
  125.         icon: {
  126.           url:iconBase+'mall.png',
  127.           scaledSize: new google.maps.Size(22, 26), // scaled size
  128.           origin: new google.maps.Point(0,0), // origin
  129.           anchor: new google.maps.Point(11,13) // anchor
  130.         }
  131.       });
  132.       icons.push(mall2);
  133.  
  134.       var drugstore = new google.maps.Marker({
  135.         // position: {lat:-23.5673281   lng: -46.6486361},
  136.         position: new google.maps.LatLng(-23.5673281,-46.6486361),
  137.         map: map,
  138.         title: 'Drugstore',
  139.         icon: {
  140.           url:iconBase+'drugstore.png',
  141.           scaledSize: new google.maps.Size(22, 26), // scaled size
  142.           origin: new google.maps.Point(0,0), // origin
  143.           anchor: new google.maps.Point(11,13) // anchor
  144.         }
  145.       });
  146.       icons.push(drugstore);
  147.  
  148.       var drugstore2 = new google.maps.Marker({
  149.         // position: {lat:-23.570592    lng: -46.643539},
  150.         position: new google.maps.LatLng(-23.570592,-46.643539),
  151.         map: map,
  152.         title: 'Drugstore',
  153.         icon: {
  154.           url:iconBase+'drugstore.png',
  155.           scaledSize: new google.maps.Size(22, 26), // scaled size
  156.           origin: new google.maps.Point(0,0), // origin
  157.           anchor: new google.maps.Point(11,13) // anchor
  158.         }
  159.       });
  160.       icons.push(drugstore2);
  161.  
  162.       var hospital = new google.maps.Marker({
  163.         // position: {lat:-23.5697277   lng: -46.6455781},
  164.         position: new google.maps.LatLng(-23.5697277,-46.6455781),
  165.         map: map,
  166.         title: 'Santa Catarina Hospital',
  167.         icon: {
  168.           url:iconBase+'hospital.png',
  169.           scaledSize: new google.maps.Size(22, 26), // scaled size
  170.           origin: new google.maps.Point(0,0), // origin
  171.           anchor: new google.maps.Point(11,13) // anchor
  172.         }
  173.       });
  174.       icons.push(hospital);
  175.  
  176.       var coffee = new google.maps.Marker({
  177.         // position: {lat:-23.571728    lng: -46.648583},
  178.         position: new google.maps.LatLng(-23.571728,-46.648583),
  179.         map: map,
  180.         title: 'Bakery Gemel',
  181.         icon: {
  182.           url:iconBase+'coffee.png',
  183.           scaledSize: new google.maps.Size(22, 26), // scaled size
  184.           origin: new google.maps.Point(0,0), // origin
  185.           anchor: new google.maps.Point(11,13) // anchor
  186.         }
  187.       });
  188.       icons.push(coffee);
  189.  
  190.       var mall3 = new google.maps.Marker({
  191.         // position: {lat:-23.5704557   lng: -46.6437266},
  192.         position: new google.maps.LatLng(-23.5704557,-46.6437266),
  193.         map: map,
  194.         title: 'Mall Patio Paulista',
  195.         icon: {
  196.           url:iconBase+'mall.png',
  197.           scaledSize: new google.maps.Size(22, 26), // scaled size
  198.           origin: new google.maps.Point(0,0), // origin
  199.           anchor: new google.maps.Point(11,13) // anchor
  200.         }
  201.       });
  202.       icons.push(mall3);
  203.  
  204.       var exchance = new google.maps.Marker({
  205.         // position: {lat:-23.5654432   lng: -46.6504513},
  206.         position: new google.maps.LatLng(-23.5654432,-46.6504513),
  207.         map: map,
  208.         title: 'Daycoval Currency Exchange Store',
  209.         icon: {
  210.           url:iconBase+'exchance.png',
  211.           scaledSize: new google.maps.Size(22, 26), // scaled size
  212.           origin: new google.maps.Point(0,0), // origin
  213.           anchor: new google.maps.Point(11,13) // anchor
  214.         }
  215.       });
  216.       icons.push(exchance);
  217.  
  218.       var market = new google.maps.Marker({
  219.         // position: {lat:-23.5741994   lng: -46.6457188},
  220.         position: new google.maps.LatLng(-23.5741994,-46.6457188),
  221.         map: map,
  222.         title: 'Supermarket Pão de Açucar',
  223.         icon: {
  224.           url:iconBase+'market.png',
  225.           scaledSize: new google.maps.Size(22, 26), // scaled size
  226.           origin: new google.maps.Point(0,0), // origin
  227.           anchor: new google.maps.Point(11,13) // anchor
  228.         }
  229.       });
  230.       icons.push(market);
  231.  
  232.       var coffee2 = new google.maps.Marker({
  233.         // position: {lat:-23.5683171   lng: -46.6488625},
  234.         position: new google.maps.LatLng(-23.5683171,-46.6488625),
  235.         map: map,
  236.         title: 'Starbucks',
  237.         icon: {
  238.           url:iconBase+'coffee.png',
  239.           scaledSize: new google.maps.Size(22, 26), // scaled size
  240.           origin: new google.maps.Point(0,0), // origin
  241.           anchor: new google.maps.Point(11,13) // anchor
  242.         }
  243.       });
  244.       icons.push(coffee2);
  245.  
  246.       var nail = new google.maps.Marker({
  247.         // position: {lat:-23.570631    lng: -46.649702},
  248.         // position: new google.maps.LatLng(-23.570631,-46.649702),
  249.         position: new google.maps.LatLng(-23.570688,-46.649961),
  250.         map: map,
  251.         title: 'Nail Polish Patou',
  252.         icon: {
  253.           url:iconBase+'nail.png',
  254.           scaledSize: new google.maps.Size(22, 26), // scaled size
  255.           origin: new google.maps.Point(0,0), // origin
  256.           anchor: new google.maps.Point(11,13) // anchor
  257.         }
  258.       });
  259.       icons.push(nail);
  260.  
  261.       var hair = new google.maps.Marker({
  262.         // position: {lat:-23.5723189   lng: -46.6477327},
  263.         position: new google.maps.LatLng(-23.5723189,-46.6477327),
  264.         map: map,
  265.         title: 'Matik Hair & Make Up',
  266.         icon: {
  267.           url:iconBase+'hair.png',
  268.           scaledSize: new google.maps.Size(22, 26), // scaled size
  269.           origin: new google.maps.Point(0,0), // origin
  270.           anchor: new google.maps.Point(11,13) // anchor
  271.         }
  272.       });
  273.       icons.push(hair);
  274.  
  275.       var fruit = new google.maps.Marker({
  276.         // position: {lat:-23.5695983   lng: -46.6494171},
  277.         position: new google.maps.LatLng(-23.5695983,-46.6494171),
  278.         map: map,
  279.         title: 'Grocery Store - Hortifruti',
  280.         icon: {
  281.           url:iconBase+'fruit.png',
  282.           scaledSize: new google.maps.Size(22, 26), // scaled size
  283.           origin: new google.maps.Point(0,0), // origin
  284.           anchor: new google.maps.Point(11,13) // anchor
  285.         }
  286.       });
  287.       icons.push(fruit);
  288.  
  289.       icons.forEach(function(icon, index){
  290.         console.log(icon.title)
  291.         google.maps.event.addListener(icon , 'click', function(){
  292.             var infowindow = new google.maps.InfoWindow({
  293.               content:icon.title,
  294.               position: icon.position,
  295.             });
  296.             infowindow.open(map);
  297.         });
  298.       });
  299.  
  300.     {/literal}
  301. {/if}
  302. {literal}
  303.  
  304.  
  305. /**GUI LEAVING HE MARKERS*/
  306.  
  307.  
  308.  
  309.     // Cores dos dots
  310.     var cor_dot = 'https://maps.google.com/mapfiles/ms/icons/green-dot.png';
  311.     var infowindow = new google.maps.InfoWindow();
  312.  
  313.   // Loop through our array of markers & place each one on the map
  314.   for( i = 0; i < hoteis.length; i++ ) {
  315.  
  316.       var position = new google.maps.LatLng(hoteis[i].lat, hoteis[i].lng);
  317.  
  318.       // Verificar se é Hostel ou Hotel
  319.       if(hoteis[i].tipo_acomodacao == '2'){
  320.           cor_dot = 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png';
  321.       }
  322.  
  323.  
  324.       else
  325.       {
  326.         cor_dot = 'https://maps.google.com/mapfiles/ms/icons/green-dot.png';
  327.       }
  328.  
  329.       marker = new google.maps.Marker({
  330.           position: position,
  331.           icon: cor_dot,
  332.           map: map
  333.       });
  334.  
  335.       google.maps.event.addListener(marker, 'click', (function(marker, i) {
  336.         return function() {
  337.           infowindow.setContent(hoteis[i].titulo);
  338.           infowindow.open(map, marker);
  339.         }
  340.       })(marker, i));
  341.  
  342.  
  343.   }
  344.  
  345. }
  346.  
  347. google.maps.event.addDomListener(window, 'load', initialize);
  348.  
  349. $(document).ready(function(){
  350.   $( ".evtmapa" ).bind( "click", function() {
  351.  
  352.       var top = $("#vmapa").offset().top - 120;
  353.       window.scrollTo(0, top);
  354.  
  355.       var destino = encodeURI(evento.local) + "," + encodeURI(evento.endereco);
  356.       var origem = "";
  357.  
  358.       //Tratando problemas no maps
  359.       if($(this).data("hotel") == "Pousada e Hostel São Paulo #1" || $(this).data("hotel") == "Acantonamento - Serra Clube Tiradentes" || $(this).data("hotel") == "Transamérica Executive The Advance" || $(this).data("hotel") == "Mercure São Paulo Nações Unidas"  || $(this).data("hotel") == "Hotel Presidente" ){
  360.           origem  = encodeURI($(this).data("endereco"));
  361.       }
  362.       else
  363.       {
  364.           origem  = encodeURI($(this).data("hotel")) + "," + encodeURI($(this).data("endereco"));
  365.       }
  366.  
  367.       console.log("Destino:" + destino);
  368.       console.log("Origem:" + origem);
  369.  
  370.       var src = "https://www.google.com/maps/embed/v1/directions?key=AIzaSyC5uCZUP9ZmpSevPak20B3erWUMNFdZt9M";
  371.  
  372.   {/literal}
  373.       var src = "https://www.google.com/maps/embed/v1/directions?key=AIzaSyC5uCZUP9ZmpSevPak20B3erWUMNFdZt9M";
  374.       src += "&origin=" + origem;
  375.       {if $arr_evento.id_evento eq 111}
  376.           src += "&destination={$arr_evento.lat},{$arr_evento.lng}";
  377.           console.log('aioooooooooo silver');
  378.       {else}
  379.           src += "&destination=" + destino;
  380.       {/if}
  381.   {literal}
  382.       src += "&avoid=tolls|highways";
  383.  
  384.       console.log("URL Criada:" + src);
  385.  
  386.       $('#fr_mapa')[0].src = src;
  387.       $("#evnts-mapa")[0].style.display = "none";
  388.       $('#fr_mapa')[0].style.display = "block";
  389.  
  390.  
  391.       if (window.top != window.self){
  392.           // Altera o tamanho de acordo com a listagem;
  393.           window.parent.postMessage("mover:300px", "*");
  394.       }
  395.       return false;
  396.   });
  397. });//ready
  398.  
  399.  
  400. $( "#vmapa" ).mouseleave(function() {
  401.  
  402.     if($('#fr_mapa').is(':visible')){
  403.       setTimeout(function () {
  404.           $("#evnts-mapa")[0].style.display = "block";
  405.           $('#fr_mapa')[0].style.display = "none";
  406.       }, 1000);
  407.     }
  408.  
  409. });
  410.  
  411. </script>
  412. {/literal}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!