function initializeFrontendMap(){
  //bind selection field
  if ($$('select.map-callout-trigger')[0]){
    selectionCallout = new SelectionCallout($$('select.map-callout-trigger')[0],'ajax-callout');
  }
  initializeMap();
}
  
function initializeMap(){
  
  //initialize listing array
  var i=0
  $("map_markers").select("ul li").each(function(s,index){
    if (s.id != 'main_marker') {
      listings[i] = {
        'id':s.id, 
        'latitude':s.readAttribute("latitude"), 
        'longitude': s.readAttribute("longitude"), 
        'address': s.readAttribute("address"), 
        'phone': s.readAttribute("phone"), 
        'type': s.readAttribute("type"),
        'thumb': s.readAttribute("thumb"),
        'url': s.readAttribute("url"),
        'hide': s.readAttribute("hide_marker"),
        'name': s.readAttribute("name") }
      i++
    } else {
      main_marker.id = s.id
      main_marker.latitude = s.readAttribute("latitude")
      main_marker.longitude = s.readAttribute("longitude")
      main_marker.address = s.readAttribute("address")
      main_marker.phone = s.readAttribute("phone")
      main_marker.type = s.readAttribute("type")
      main_marker.thumb = s.readAttribute("thumb")
      main_marker.url = s.readAttribute("url")
      main_marker.name = s.readAttribute("name")
      main_marker.hide = s.readAttribute("hide_marker")
    }
  });
  
  //reset all check boxes
  cbPicks = document.getElementsByName('picks')
  for(i = 0; i < cbPicks.length; i++){
    cbPicks[i].checked = false
  }
  
  var zoom = 13
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map_div"));
    map.setCenter(new GLatLng(main_marker['latitude'],main_marker['longitude']), zoom);
    
    //infowindow = new GInfoWindow()
    
    //create a marker for the main venue and add it to the map
    main_marker_object = new GMarker(new GLatLng(main_marker['latitude'],main_marker['longitude']), {icon : whichIcon(main_marker['type']), title : main_marker['name'], hide : main_marker['hide']});
    map.addOverlay(main_marker_object);
    //the following is because marker.openInfoWindow() does not seem to 
    //be working so i used bindInfoWindow then clicked it instead
    if (!main_marker['hide']) {
        main_marker_object.bindInfoWindow("<img src='" + main_marker['thumb'] + "' /><strong>" + main_marker['name'] + "</strong><br />" + main_marker['address'] + "<br />" + main_marker['phone'] + "<br /><a href='" + main_marker['url'] + "'>More ></a>");
        GEvent.trigger(main_marker_object,'click');
    }
    //add the markers of the nearby venues to the map but hide them
    for(i=0; i < listings.length; i++) {
      markers[listings[i].id] = new GMarker(new GLatLng(listings[i].latitude,listings[i].longitude),{icon : whichIcon(listings[i].type), title : listings[i].name});
      markers[listings[i].id].bindInfoWindow("<img src='" + listings[i].thumb + "' /><strong>" + listings[i].name + "</strong><br />" + listings[i].address + "<br />" + listings[i].phone + "<br /><a href='" + listings[i].url + "'>More ></a>");
      map.addOverlay(markers[listings[i].id],listings[i].name);
      markers[listings[i].id].hide();
    }
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
  }
}