<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDr6kMckb7Ef_D5p7c3h-6pMoC3IsCJ-28"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> <script> $(document).ready(function(){ var map; var cobertura = ""; map = new google.maps.Map(document.getElementById('containerMap'), { center: {lat: 22.1288337, lng: -101.0402272}, zoom: 15 }); var product = $('.product-name').text().trim(); if(product.indexOf("Sigfox") > -1) { $('.div-alert').show(); $('.woocommerce').addClass('sig'); } else { } $('#btn-tc').click(function(){ $('.woocommerce').removeClass('sig'); $('.woocommerce').addClass('animated bounceInUp'); $('.div-alert').hide(); }); $('#btn-vc').click(function(){ $('.woocommerce').hide(); $('.div-alert').hide(); $('.coverage').show(); }); $("#dirección").on('change',function() { buscaUbicacion(); }); $("#buscar").on('clic', function() { var val = $("#dirección").val(); if(val != "") buscaUbicacion(); }); google.maps.event.addListener(map, 'click', function(event) { var latitude = event.latLng.lat(); var longitude = event.latLng.lng(); console.log( latitude + ', ' + longitude ); var dirSig = 'https://www.levelgas.com/PHPServices/Sigfox/getSigfoxCoverage.php?lat='+latitude+'&lon='+longitude; $.ajax({ url:dirSig, method:"GET", data: {}, beforeSend: function(){ $("#changes").val("Buscando..."); swal("Verificando...", { button: false, }); } }).done(function(res) { var icon = getColorIcon(res); $("#changes").val(cobertura); swal.close(); if(res == 1 || res == 2){$('.btn-next-compra').show(); $('.btn-back-tienda').hide();} else{$('.btn-next-compra').hide(); $('.btn-back-tienda').show();$('.coverage').hide();$('#rowF').show();$('#et_pb_contact_userlat_1').val(latitude);$('#et_pb_contact_userlon_1').val(longitude);} addMarker(event.latLng, map, cobertura, icon); }).fail(function(){ }).always(function(){}); }); function addMarker(location, map, titulo, icon) { var marker = new google.maps.Marker({ position: location, map: map, title:titulo, icon:icon }); } var key = "AIzaSyDr6kMckb7Ef_D5p7c3h-6pMoC3IsCJ-28"; function getColorIcon(res) { var icon = 0; if(res == 1) { icon = 'https://maps.google.com/mapfiles/ms/icons/green-dot.png'; cobertura = "Si hay cobertura!"; swal("Excelente!", cobertura, "success"); } else if( res == 0) { icon = 'https://maps.google.com/mapfiles/ms/icons/red-dot.png'; cobertura = "No hay cobertura!"; swal("Lo Sentimos!", cobertura, "error"); } else if(res == 2) { icon = 'https://maps.google.com/mapfiles/ms/icons/yellow-dot.png'; cobertura = "Estas en los límites!"; swal("Excelente!", 'Si hay cobertura pero '+cobertura, "warning"); } else if(res == 3) { icon = 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png'; cobertura = "No existe cobertura!"; swal("Lo Sentimos!", cobertura, "error"); } return icon; } function showHideLoader(value) { if(value) $("#loaderGIF").css("visibility","visible"); else $("#loaderGIF").css("visibility","hidden"); } function buscaUbicacion() { var cad = $("#dirección").val(); var dir = 'https://maps.googleapis.com/maps/api/geocode/json?address='+cad+'&key=AIzaSyCaZxcI_2AoLMhYckC88l2xI2gxanKDNI4'; $.ajax({ url: dir, method:"GET", dataType: "json", data: {address: cad, key:key}, beforeSend: function(){ $("#changes").val("Buscando..."); swal("Verificando...", { button: false, }); } }).done(function(result) { console.log(result['results'][0]['geometry']['location']['lat'], result['results'][0]['geometry']['location']['lng']); var lat = result['results'][0]['geometry']['location']['lat']; var lng = result['results'][0]['geometry']['location']['lng']; var dirSig = 'https://www.levelgas.com/PHPServices/Sigfox/getSigfoxCoverage.php?lat='+lat+'&lon='+lng; $.ajax({ url:dirSig, method:"GET2", data: {} }).done(function(res) { console.log(res[0][0][0]); var icon = getColorIcon(res); $("#changes").val(cobertura); swal.close(); if(res == 1 || res == 2){$('.btn-next-compra').show(); $('.btn-back-tienda').hide();} else{$('.btn-next-compra').hide(); $('.btn-back-tienda').show();$('.coverage').hide();$('#rowF').show();$('#et_pb_contact_userlat_1').val(latitude);$('#et_pb_contact_userlon_1').val(longitude);} var myLatlng = new google.maps.LatLng(lat, lng); map = new google.maps.Map(document.getElementById('containerMap'), { center: myLatlng, zoom: 15 }); var marker = new google.maps.Marker({ position: myLatlng, map:map, title:cobertura, icon: icon }); google.maps.event.addListener(map, 'click', function(event) { var latitude = event.latLng.lat(); var longitude = event.latLng.lng(); console.log( latitude + ', ' + longitude ); var dirSig = 'https://www.levelgas.com/PHPServices/Sigfox/getSigfoxCoverage.php?lat='+latitude+'&lon='+longitude; $.ajax({ url:dirSig, method:"GET", data: {}, beforeSend: function() { $("#changes").val("Buscando..."); swal("Verificando...", { button: false, }); } }).done(function(res) { var icon = getColorIcon(res); $("#changes").val(cobertura); swal.close(); if(res == 1 || res == 2){$('.btn-next-compra').show(); $('.btn-back-tienda').hide();} else{$('.btn-next-compra').hide(); $('.btn-back-tienda').show();$('.coverage').hide();$('#rowF').show();$('#et_pb_contact_userlat_1').val(latitude);$('#et_pb_contact_userlon_1').val(longitude);} addMarker(event.latLng, map, cobertura, icon); }).fail(function(){ }).always(function(){}); }); }).fail(function(){ }).always(function(){}); }).fail(function(){ }).always(function(){}); } $('.btn-next-compra').click(function(){ $('.woocommerce').removeClass('sig'); $('.woocommerce').show(); $('.woocommerce').addClass('animated bounceInUp'); $('.coverage').hide(); }); $('.btn-back-tienda').click(function(){ location.href ="https://www.levelgas.com/carro/"; }); }); </script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"> <style> .sig { opacity: 0.3 !important; pointer-events: none; } .btn-secondary{ color: #1e73be; position: relative; padding: 0.3em 1em; border: 2px solid; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background: transparent; font-size: 20px; font-weight: 500; line-height: 1.7em !important; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } .btn-primary { background: #0c71c3; border-color: #0c71c3; color: white; border: 2px solid; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; letter-spacing: 0px; font-size: 20px; font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif !important; font-weight: 500; line-height: 1.9em !important; padding: 0.3em 1em; } .swal-button { background-color: #0c71c3 !important; } .swal-title { font-size: 22px !important; margin-bottom: 5px !important; font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif !important; } .swal-text{ font-size: 26px; font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif !important; } </style> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <div class="div-alert animated bounceInDown" style="display:none;"> <h1>Queremos estar seguros que tu levelgas Sigfox funcione correctamente</h1><br> <h3 style="color:#0288d1">Revisa la cobertura del lugar de instalación</h3><br> <button id="btn-vc" class="btn-primary">Verificar Ahora</button> <button id="btn-tc" class="btn-secondary">Ya Verifique</button> </div> <br></br> <div style="display:none;" class="coverage col2-set animated bounceInUp"> <div class="col-1"> <h2>Cobertura Sigfox</h2> <br> <p>Escribe tu dirección o da un click sobre el mapa y por el color del marcador sabrás si en tu ubicación hay o no cobertura Sigfox.</p><br> <div class="input-group"> <input id="dirección" class="form-control mr-sm-2" type="text" placeholder="Dirección a buscar" aria-label="Search" style="padding-left:10px; margin-top:3px; font-size:15px; width:100%; height:38px;" > </div> <button id="buscar" class="btn-primary bg-primary text-white mr-sm-2" type="submit" style="font-size:15px; width:auto; margin-top:5px;">Buscar</button> <br> <ul class="list-group" style="padding-left: 0px; padding-top: 20px;"> <li class="list-group-item" style="height:auto; list-style:none;"><p style="font-size:14px;" class="text-secondary"><span class="icon" style="color:green; font-size: 25px;"><i class="fa fa-map-marker"></i></span>  Genial, si hay cobertura en tu ubicación</p></li> <li class="list-group-item" style="height:auto; list-style:none;"><p style="font-size:14px;" class="text-secondary"><span class="icon" style="color:yellow; font-size: 25px;"><i class="fa fa-map-marker"></i></span>  Si hay cobertura pero estas en los limites</p></li> <li class="list-group-item" style="height:auto; list-style:none;"><p style="font-size:14px;" class="text-secondary"><span class="icon" style="color:red; font-size: 25px;"><i class="fa fa-map-marker"></i></span>  Lo siento, no hay cobertura</p></li> </ul> <br><br> <input id="changes" class="form-control mr-sm-2 animated tada" type="text" placeholder="¿Tengo cobertura?" readonly style="font-size: 22px; font-weight: bold; border: 0px; color:#0c71c3"><br><br> <button style="display:none;" class="btn-primary btn-next-compra animated bounceInLeft">Continuar con la compra</button> <button style="display:none;" class="btn-secondary btn-back-tienda animated bounceInLeft">Regresar al carrito</button> </div> <div class="col-2"> <div id="containerMap" style="width: 100%; height:500px;"></div> </div> </div>