function createMarker(lat, lng, icon, title, popup_content) {
  var point = new GLatLng(lat, lng)
  var marker = new GMarker(point, { "icon": icon, "title": title });
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(popup_content);
  });
    
  return marker;
}


function loadMarkersFromAjax(page_id, map_cmp_id, editable) {
 
  Ext.Ajax.request({
          url: 'page/getMarkers?page[id]=' + page_id,
          method: 'GET',
          success: function(result, request) {
            response = Ext.decode(result.responseText);
            response.markers.each(function(item) {
              var delete_button = '';
              if (editable) {
                delete_button = '<br /><a href="#" style="color: red;" onclick="deleteMapMarker(' + item.id + ', ' + page_id + ', \'' + map_cmp_id + '\')">Delete Marker</a>';
              }
              
              var point = new GLatLng(item.lat, item.lng)
              var marker = new GMarker(point, { "icon": window['marker_icon_' + item.icon_id], "title": item.title, "draggable": true });

              GEvent.addListener(marker, "click", function() {
                marker.openInfoWindowHtml("<h1>" + item.title + "</h1><p>" + item.description + "</p>" + delete_button);
              });
              
              GEvent.addListener(marker, "dragend", function(latlng) {
                marker.closeInfoWindow();
                Ext.Ajax.request({
                        url: 'page/moveMarker?page[id]=' + page_id,
                        method: 'POST',
                        params: {
                          poi_id: item.id,
                          lat: latlng.lat(),
                          lng: latlng.lng()
                        }
                    });                
              });

              Ext.getCmp(map_cmp_id).getMap().addOverlay(marker);
              
            });
          }
      });
}



function deleteMapMarker(marker_id, page_id, map_cmp_id) {
  Ext.MessageBox.confirm('Confirm', 'Are you sure you want to delete this marker?', 
    function(btn) {
      if (btn == 'yes') {
        Ext.Ajax.request({
            url: 'page/deleteMarker?page[id]=' + page_id,
            method: 'POST',
            params: {
              poi_id: marker_id
            },
            success: function(result, request) {
              Ext.getCmp(map_cmp_id).getMap().clearOverlays();
              var center_lat = Ext.getCmp('center_lat');
              var center_lng = Ext.getCmp('center_lng');
              Ext.getCmp(map_cmp_id).createCenterMarker(center_lat.getValue(), center_lng.getValue());
              loadMarkersFromAjax(page_id, map_cmp_id, true);

            }
        });
      }
    });
}

// Add all the icons to improve performance by reusing them

var marker_icon_22 = new GIcon(G_DEFAULT_ICON);
marker_icon_22.image = '/images/map_icons/plane.png';
marker_icon_22.iconSize = GSize(32, 32);
marker_icon_22.shadow = '/images/map_icons/plane.shadow.png';
marker_icon_22.shadowSize = GSize(59, 32);


var marker_icon_1 = new GIcon(G_DEFAULT_ICON);
marker_icon_1.image = '/images/map_icons/arts.png';
marker_icon_1.iconSize = GSize(32, 32);
marker_icon_1.shadow = '/images/map_icons/arts.shadow.png';
marker_icon_1.shadowSize = GSize(59, 32);


var marker_icon_2 = new GIcon(G_DEFAULT_ICON);
marker_icon_2.image = '/images/map_icons/bar.png';
marker_icon_2.iconSize = GSize(32, 32);
marker_icon_2.shadow = '/images/map_icons/bar.shadow.png';
marker_icon_2.shadowSize = GSize(59, 32);


var marker_icon_3 = new GIcon(G_DEFAULT_ICON);
marker_icon_3.image = '/images/map_icons/bus.png';
marker_icon_3.iconSize = GSize(32, 32);
marker_icon_3.shadow = '/images/map_icons/bus.shadow.png';
marker_icon_3.shadowSize = GSize(59, 32);


var marker_icon_6 = new GIcon(G_DEFAULT_ICON);
marker_icon_6.image = '/images/map_icons/coffeehouse.png';
marker_icon_6.iconSize = GSize(32, 32);
marker_icon_6.shadow = '/images/map_icons/coffeehouse.shadow.png';
marker_icon_6.shadowSize = GSize(59, 32);


var marker_icon_5 = new GIcon(G_DEFAULT_ICON);
marker_icon_5.image = '/images/map_icons/camera.png';
marker_icon_5.iconSize = GSize(32, 32);
marker_icon_5.shadow = '/images/map_icons/camera.shadow.png';
marker_icon_5.shadowSize = GSize(59, 32);


var marker_icon_8 = new GIcon(G_DEFAULT_ICON);
marker_icon_8.image = '/images/map_icons/dollar.png';
marker_icon_8.iconSize = GSize(32, 32);
marker_icon_8.shadow = '/images/map_icons/dollar.shadow.png';
marker_icon_8.shadowSize = GSize(59, 32);


var marker_icon_7 = new GIcon(G_DEFAULT_ICON);
marker_icon_7.image = '/images/map_icons/deli.png';
marker_icon_7.iconSize = GSize(32, 32);
marker_icon_7.shadow = '/images/map_icons/deli.shadow.png';
marker_icon_7.shadowSize = GSize(59, 32);


var marker_icon_30 = new GIcon(G_DEFAULT_ICON);
marker_icon_30.image = '/images/map_icons/snack_bar.png';
marker_icon_30.iconSize = GSize(32, 32);
marker_icon_30.shadow = '/images/map_icons/snack_bar.shadow.png';
marker_icon_30.shadowSize = GSize(59, 32);


var marker_icon_9 = new GIcon(G_DEFAULT_ICON);
marker_icon_9.image = '/images/map_icons/ferry.png';
marker_icon_9.iconSize = GSize(32, 32);
marker_icon_9.shadow = '/images/map_icons/ferry.shadow.png';
marker_icon_9.shadowSize = GSize(59, 32);


var marker_icon_10 = new GIcon(G_DEFAULT_ICON);
marker_icon_10.image = '/images/map_icons/fishing.png';
marker_icon_10.iconSize = GSize(32, 32);
marker_icon_10.shadow = '/images/map_icons/fishing.shadow.png';
marker_icon_10.shadowSize = GSize(59, 32);


var marker_icon_12 = new GIcon(G_DEFAULT_ICON);
marker_icon_12.image = '/images/map_icons/golfer.png';
marker_icon_12.iconSize = GSize(32, 32);
marker_icon_12.shadow = '/images/map_icons/golfer.shadow.png';
marker_icon_12.shadowSize = GSize(59, 32);


var marker_icon_14 = new GIcon(G_DEFAULT_ICON);
marker_icon_14.image = '/images/map_icons/helicopter.png';
marker_icon_14.iconSize = GSize(32, 32);
marker_icon_14.shadow = '/images/map_icons/helicopter.shadow.png';
marker_icon_14.shadowSize = GSize(59, 32);


var marker_icon_15 = new GIcon(G_DEFAULT_ICON);
marker_icon_15.image = '/images/map_icons/hospitals.png';
marker_icon_15.iconSize = GSize(32, 32);
marker_icon_15.shadow = '/images/map_icons/hospitals.shadow.png';
marker_icon_15.shadowSize = GSize(59, 32);


var marker_icon_16 = new GIcon(G_DEFAULT_ICON);
marker_icon_16.image = '/images/map_icons/hotsprings.png';
marker_icon_16.iconSize = GSize(32, 32);
marker_icon_16.shadow = '/images/map_icons/hotsprings.shadow.png';
marker_icon_16.shadowSize = GSize(59, 32);


var marker_icon_17 = new GIcon(G_DEFAULT_ICON);
marker_icon_17.image = '/images/map_icons/info.png';
marker_icon_17.iconSize = GSize(32, 32);
marker_icon_17.shadow = '/images/map_icons/info.shadow.png';
marker_icon_17.shadowSize = GSize(59, 32);


var marker_icon_18 = new GIcon(G_DEFAULT_ICON);
marker_icon_18.image = '/images/map_icons/marina.png';
marker_icon_18.iconSize = GSize(32, 32);
marker_icon_18.shadow = '/images/map_icons/marina.shadow.png';
marker_icon_18.shadowSize = GSize(59, 32);


var marker_icon_19 = new GIcon(G_DEFAULT_ICON);
marker_icon_19.image = '/images/map_icons/parkinglot.png';
marker_icon_19.iconSize = GSize(32, 32);
marker_icon_19.shadow = '/images/map_icons/parkinglot.shadow.png';
marker_icon_19.shadowSize = GSize(59, 32);


var marker_icon_11 = new GIcon(G_DEFAULT_ICON);
marker_icon_11.image = '/images/map_icons/gas.png';
marker_icon_11.iconSize = GSize(32, 32);
marker_icon_11.shadow = '/images/map_icons/gas.shadow.png';
marker_icon_11.shadowSize = GSize(59, 32);


var marker_icon_20 = new GIcon(G_DEFAULT_ICON);
marker_icon_20.image = '/images/map_icons/phone.png';
marker_icon_20.iconSize = GSize(32, 32);
marker_icon_20.shadow = '/images/map_icons/phone.shadow.png';
marker_icon_20.shadowSize = GSize(59, 32);


var marker_icon_21 = new GIcon(G_DEFAULT_ICON);
marker_icon_21.image = '/images/map_icons/picnic.png';
marker_icon_21.iconSize = GSize(32, 32);
marker_icon_21.shadow = '/images/map_icons/picnic.shadow.png';
marker_icon_21.shadowSize = GSize(59, 32);


var marker_icon_23 = new GIcon(G_DEFAULT_ICON);
marker_icon_23.image = '/images/map_icons/police.png';
marker_icon_23.iconSize = GSize(32, 32);
marker_icon_23.shadow = '/images/map_icons/police.shadow.png';
marker_icon_23.shadowSize = GSize(59, 32);


var marker_icon_24 = new GIcon(G_DEFAULT_ICON);
marker_icon_24.image = '/images/map_icons/postoffice.png';
marker_icon_24.iconSize = GSize(32, 32);
marker_icon_24.shadow = '/images/map_icons/postoffice.shadow.png';
marker_icon_24.shadowSize = GSize(59, 32);


var marker_icon_26 = new GIcon(G_DEFAULT_ICON);
marker_icon_26.image = '/images/map_icons/restaurant.png';
marker_icon_26.iconSize = GSize(32, 32);
marker_icon_26.shadow = '/images/map_icons/restaurant.shadow.png';
marker_icon_26.shadowSize = GSize(59, 32);


var marker_icon_27 = new GIcon(G_DEFAULT_ICON);
marker_icon_27.image = '/images/map_icons/sailing.png';
marker_icon_27.iconSize = GSize(32, 32);
marker_icon_27.shadow = '/images/map_icons/sailing.shadow.png';
marker_icon_27.shadowSize = GSize(59, 32);


var marker_icon_28 = new GIcon(G_DEFAULT_ICON);
marker_icon_28.image = '/images/map_icons/shopping.png';
marker_icon_28.iconSize = GSize(32, 32);
marker_icon_28.shadow = '/images/map_icons/shopping.shadow.png';
marker_icon_28.shadowSize = GSize(59, 32);


var marker_icon_29 = new GIcon(G_DEFAULT_ICON);
marker_icon_29.image = '/images/map_icons/ski.png';
marker_icon_29.iconSize = GSize(32, 32);
marker_icon_29.shadow = '/images/map_icons/ski.shadow.png';
marker_icon_29.shadowSize = GSize(59, 32);


var marker_icon_31 = new GIcon(G_DEFAULT_ICON);
marker_icon_31.image = '/images/map_icons/sportvenue.png';
marker_icon_31.iconSize = GSize(32, 32);
marker_icon_31.shadow = '/images/map_icons/sportvenue.shadow.png';
marker_icon_31.shadowSize = GSize(59, 32);


var marker_icon_13 = new GIcon(G_DEFAULT_ICON);
marker_icon_13.image = '/images/map_icons/supermarket.png';
marker_icon_13.iconSize = GSize(32, 32);
marker_icon_13.shadow = '/images/map_icons/supermarket.shadow.png';
marker_icon_13.shadowSize = GSize(59, 32);


var marker_icon_32 = new GIcon(G_DEFAULT_ICON);
marker_icon_32.image = '/images/map_icons/swimming.png';
marker_icon_32.iconSize = GSize(32, 32);
marker_icon_32.shadow = '/images/map_icons/swimming.shadow.png';
marker_icon_32.shadowSize = GSize(59, 32);


var marker_icon_4 = new GIcon(G_DEFAULT_ICON);
marker_icon_4.image = '/images/map_icons/cabs.png';
marker_icon_4.iconSize = GSize(32, 32);
marker_icon_4.shadow = '/images/map_icons/cabs.shadow.png';
marker_icon_4.shadowSize = GSize(59, 32);


var marker_icon_33 = new GIcon(G_DEFAULT_ICON);
marker_icon_33.image = '/images/map_icons/toilets.png';
marker_icon_33.iconSize = GSize(32, 32);
marker_icon_33.shadow = '/images/map_icons/toilets.shadow.png';
marker_icon_33.shadowSize = GSize(59, 32);


var marker_icon_25 = new GIcon(G_DEFAULT_ICON);
marker_icon_25.image = '/images/map_icons/rail.png';
marker_icon_25.iconSize = GSize(32, 32);
marker_icon_25.shadow = '/images/map_icons/rail.shadow.png';
marker_icon_25.shadowSize = GSize(59, 32);


var marker_icon_34 = new GIcon(G_DEFAULT_ICON);
marker_icon_34.image = '/images/map_icons/tram.png';
marker_icon_34.iconSize = GSize(32, 32);
marker_icon_34.shadow = '/images/map_icons/tram.shadow.png';
marker_icon_34.shadowSize = GSize(59, 32);



var marker_icon_35 = new GIcon(G_DEFAULT_ICON);
marker_icon_35.image = '/images/map_icons/firedept.png';
marker_icon_35.iconSize = GSize(32, 32);
marker_icon_35.shadow = '/images/map_icons/firedept.shadow.png';
marker_icon_35.shadowSize = GSize(59, 32);


var marker_icon_36 = new GIcon(G_DEFAULT_ICON);
marker_icon_36.image = '/images/map_icons/blue-pushpin.png';
marker_icon_36.iconSize = GSize(32, 32);
marker_icon_36.shadow = '/images/map_icons/pushpin_shadow.png';
marker_icon_36.shadowSize = GSize(59, 32);