Tiendas en el mapa

Puedes añadir a tu sitio un mapa para localizar las tiendas cercanas utilizando la ubicación del navegador, ingresando una dirección o un código postal.

​Busqueda de tiendas en el mapa

Puedes añadir a tu sitio un mapa para realizar la busqueda de tiendas.

<div>
    <iframe src="https://www.paynet.com.mx/mapa-tiendas/index.html"></iframe>
</div>

  • Si deseas deshabilitar la ubicación del navegador debes agregar el parametro locationNotAllowed=true en la url de la propiedad src del iframe
<div>
    <iframe src="https://www.paynet.com.mx/mapa-tiendas/index.html?locationNotAllowed=true"></iframe>
</div>

  • Puedes parametrizar los campos de busqueda agregando los siguientes parametros:
  • Dirección: address=Querétaro
  • Código Postal: postalCode=76900
  • Monto: amount=2000

    Monto: El campo monto es un parametro oculto, este es util en pagos de montos grandes ya que para algunas tiendas hay un limite maximo de pago.

<div>
    <iframe src="https://www.paynet.com.mx/mapa-tiendas/index.html?address=Querétaro&postalCode=76900&amount=2000"></iframe>
</div>

  • Tambíen puedes incluir el mapa a un modal:
<link rel="stylesheet" href="/css/colorbox.css" />
<script src="/js/jquery.js"></script>
<script src="/js/jquery.colorbox-min.js"></script>
<script>
$(document).ready(function(){
    $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
    
    //Example of preserving a JavaScript event for inline calls.
    $("#click").click(function(){ 
        $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"});
        return false;
    });
});
<p><h3>Localiza tu tienda mas cercana dando click <a class='iframe' href="/mapa-de-tiendas.html">aquí</a></h3></p>
</script>

 

Pruebalo dando click aquí

 

Colorbox fue utilizado para crear este ejemplo.