Jquery mobile page display google map

Jquery mobile page display google map

i want to show a map with my current location and set route() to the shop nearest to my location!

my code on index.html

<div data-role="page" id="paginaMapa" data-url="map-page">        
  <div data-role="header">
      <h1>Ruta a la tienda mas cercana</h1>
      </div>
  <div class="ui-content" id="map-canvas"></div>
      <a href="#paginaConsultaProductos" id="goback" class="miBoton posicionBoton" ></a>
      </div>

my map.js


the ref "#paginaMapa" is on my json + listview callback

when i click the "li" element, the ref go to #paginaMapa

i want to use the variables on my index.html to display the center map and to trace the route to the point nearest.

var origen = new google.maps.LatLng(latitud,longitud);
      var destinoTiendaA = new google.maps.LatLng(10.693804, -71.633812);
      var destinoTiendaB = new google.maps.LatLng(10.649756,-71.596935);
 var destinoTiendaC = new google.maps.LatLng(10.675479,-71.627982)

there is the fiddle  http://jsfiddle.net/zqLxrp1y/


PD: I want to take the "distancia" value on my li elements and display only the trace route to the shop of that product.