<script>
  var gssMap;
  var markers = new Map();
$(function(){
  gssMap = new gssmaps.GSSMap('7fNWCXhqQ_OSyB4fd8C6539PYQ1G8YjdsOCoTtio', 'map');

  $('#remove-all-markers').on('click', function(){
    gssMap.removeAllMarkers();
  });

  $('#custom-marker').on('click', function(){
    if($(this).val() == "Drop Custom Marker"){
      $(this).val("Drop Default Marker");
    } else {
      $(this).val("Drop Custom Marker");
    }
  });

  gssMap.on('contextmenu', function(e){
    var lat = e.latlng.lat;
    var lng = e.latlng.lng;
    var marker;
    if($('#custom-marker').val() == "Drop Custom Marker"){
      marker = addCustomMarker(lat, lng);
    } else {
      marker = addMarker(lat, lng);
    }

    markers.set(marker.getMarkerId(), marker);
    marker.bindPopupContent("Delete this marker?<br><br><input type='button' value='Delete'" +
    " onclick='deleteMarker(" + marker.getMarkerId() +")' />");
  });

  function addMarkerWithSelect(lat, lng, popupContent){
    var selectIcon = new gssmaps.GSSIcon("assets/marker-icon-2x.401d815dc206b8dc1b17cd0e37695975.png", [50, 82], [25, 82]);
    var gssLatLng = new gssmaps.GSSLatLng(lat, lng);
    var gssMarker = new gssmaps.GSSMarker(gssLatLng, {'selectIcon' : selectIcon});
    return gssMap.addMarker(gssMarker, popupContent);
  }

  function addMarker(lat, lng, popupContent){
    var gssLatLng = new gssmaps.GSSLatLng(lat, lng);
    var gssMarker = new gssmaps.GSSMarker(gssLatLng);
    return gssMap.addMarker(gssMarker, popupContent);
  }

  function addCustomMarker(lat, lng, popupContent){
    var gssLatLng = new gssmaps.GSSLatLng(lat, lng);
    var gssIcon = new gssmaps.GSSIcon("assets/bus-marker.png", [32, 32], [16, 32]);
    var options = {"icon" : gssIcon};
    var gssMarker = new gssmaps.GSSMarker(gssLatLng, options);
    return gssMap.addMarker(gssMarker, popupContent);
  }

  function addCustomMarkerWithSmallerSizeThanActual(lat, lng, popupContent){
    var gssLatLng = new gssmaps.GSSLatLng(lat, lng);
    var gssIcon = new gssmaps.GSSIcon("assets/bus-marker.png", [22, 22], [10, 22]);
    var selectIcon = new gssmaps.GSSIcon("assets/bus-marker.png", [32, 32], [16, 32]);
    var options = {"icon" : gssIcon, 'selectIcon' : selectIcon};
    var gssMarker = new gssmaps.GSSMarker(gssLatLng, options);
    return gssMap.addMarker(gssMarker, popupContent);
  }

  function removeMarker(gssMarker){
    gssMap.removeMarker(gssMarker);
  }

  var gssMarker1 = addMarkerWithSelect(47.6101, -122.3421);
  var gssMarker2 = addMarker(48.5101, -124.3421, 'Marker Position: [48.5101, -124.3421]');
  var gssMarker3 = addCustomMarker(48.9101, -124.3421, "It's a custom marker");
  var gssMarker4 = addCustomMarkerWithSmallerSizeThanActual(49.0101, -124.3421);
})

function deleteMarker(markerId){
  marker = markers.get(markerId);
  markers.delete(markerId);
  gssMap.removeMarker(marker);
}

</script>