File Manager

{* map template *}
{* inline css styles are just for example purposes *}
<style type="text/css">
.infoBox {
  padding: 0.5em;
  border: 1px solid-black;
  background-color: yellow;
}
.m_tooltip {
  padding: 0.5em;
  border: 1px solid-black;
  border-radius: 3px;
  background-color: white;
}
</style>

<script src="http://maps.google.com/maps/api/js?libraries=geometry{if $map->sensor}&sensor=true{else}&sensor=false{/if}"></script>
<script src="{$mod->GetModuleURLPath()}/lib/js/infobox_packed.js"></script>
<script src="{$mod->GetModuleURLPath()}/lib/js/map_tooltip.js"></script>
<script src="{$mod->GetModuleURLPath()}/lib/js/jquery.cggm_map.js"></script>

<div id="cggm_map_{$mapinstance}" style="height: 500px; width: 500px;"></div>
{if $map->directions}
  {* enable directions *}
  {$generator->get_directions_form()}
{/if}

{* javascript is on the bottom incase some smarty variables we need were set in the various generator calls *}
<script type="text/javascript">
if( typeof(jQuery) == 'undefined' ) {
  var div = document.getElementById('cggm_map_{$mapinstance}').
  div.innerHTML = '<h3 style="color: red;">jQuery and jQuery UI Are Required</h3>';
  throw new Error('jQuery and jQuery UI Are Required');
}
$(document).ready(function(){
  var obj = $('#cggm_map_{$mapinstance}');
  obj.cggm2({$generator->get_map_options_js()});
  {if $map->directions && isset($directions_form_id)}$obj.cggm2('options','directions_form','#{$directions_form_id}');{/if}
});
</script>