html5_data.html

<div id="map"></div>

<div id="map-side-bar">
  <div class="map-location" data-id="1" data-point="{lng: -122.2678847, lat: 37.8574888}" data-category="'market'">
    <a href="#" class="map-link">Berkeley Bowl</a>
    <div class="info-box">
      <p>A great place to get all your groceries, especially fresh fruits and vegetables.</p>
    </div>
  </div>
  <div class="map-location" data-id="2" data-point="{lng: -122.4391131, lat: 37.7729943}" data-category="'restaurant'">
    <a href="#" class="map-link">Nopalito</a>
    <div class="info-box">
      <p>The best authentic Mexican restaurant in San Francisco.</p>
    </div>
  </div>
  <div class="map-location" data-id="3" data-point="{lng: -122.4481651, lat: 37.8042096}" data-category="'museum'">
    <a href="#" class="map-link">Exploratorium</a>
    <div class="info-box">
      <p>A hands-on museum of science, art, and human perception in San Francisco.</p>
    </div>
  </div>
</div>

html5_data.js

$(document).ready(function(){
  $('#map').jMapping({metadata_options: {type: 'html5'}});
});