map_config.html

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

<div id="map-side-bar">
  <div class="map-location" data-jmapping="{id: 1, point: {lng: -122.2678847, lat: 37.8574888}, 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-jmapping="{id: 2, point: {lng: -122.4391131, lat: 37.7729943}, 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-jmapping="{id: 3, point: {lng: -122.4481651, lat: 37.8042096}, 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>

map_config.js

$(document).ready(function(){
  $('#map').jMapping({
    map_config: {
      navigationControlOptions: {
        style: google.maps.NavigationControlStyle.DEFAULT
      },
      mapTypeId: google.maps.MapTypeId.HYBRID,
      zoom: 7
    }
  });
});